介绍bootstrap_datetimepicker插件的使用

南桥秋风

已于 2022-09-18 21:07:42 修改

阅读量4.2k

点赞数 2

分类专栏： Java‘WebJavaWeb 文章标签： bootstrap 前端 javascript

于 2022-09-18 21:00:09 首次发布

本文链接：https://blog.csdn.net/weixin_45773002/article/details/126922626

版权

Java‘WebJavaWeb 专栏收录该内容

5 篇文章 2 订阅

订阅专栏

文章目录

一、介绍bootstrap_datetimepicker插件
二、bootstrap_datetimepicker使用效果
三、bootstrap_datetimepicker的使用
完整测试代码

一、介绍bootstrap_datetimepicker插件

bootstrap_datetimepickep是日期时间选择器，用于在表单中添加日历

二、bootstrap_datetimepicker使用效果

在这里插入图片描述

三、bootstrap_datetimepicker的使用

我是在jsp页面中引入的bootstrap_datetimepicker的插件，按照如下顺序引入，被依赖的插件放在前面，必须按照如下顺序引入，首先是引入Jquery插件，其次是bootstrap插件，最后是datetimepicker插件，强调，必须按照如下顺序：
在这里插入图片描述

引入插件后，调用工具函数使用

完整测试代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <!--JQUERY-->
    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    <!--BOOTSTRAP框架-->
    <link rel="stylesheet" type="text/css" href="jquery/bootstrap_3.3.0/css/bootstrap.min.css">
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <!--BOOTSTRAP_DATETIMEPICKER插件-->
    <link rel="stylesheet" type="text/css"
          href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">
    <script type="text/javascript"
            src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript"
            src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
    <title>演示bs_datatimepicker插件</title>
<script type="text/javascript">
$(function () {
    //当容器加载完成，对容器调用工具函数
    $("#myDate").datetimepicker({
        language:'zh-CN', //语言
        format:'yyyy-mm-dd',//日期的格式
        minView:'month', //可以选择的最小视图
        initialDate:new Date(),//初始化显示的日期
        autoclose:true,//设置选择完日期或者时间之后，日否自动关闭日历
        todayBtn:true,//设置自动显示为今天
        clearBtn:false//设置是否清空按钮，默认为false
    });
});
</script>
</head>
<body>
<input type="text" id="myDate">
</body>
</html>