Bootstrap的datetimepicker插件使用

在设计前端页面的时候，经常涉及到日期的选择，那么在页面显示一个日历对用户体验来说是比较好。bootstrap中有datetimepicker插件专门实现日历。
在使用datetimepicker之前有几个必备的文件要先引入下面几个文件

(1) datetimepicker的css文件和js文件
(2)jQuery文件
(3)Bootstrap的css文件和js文件
(4)moment文件
引入的文件如下所示

<link href="/pages/plugins/bootstrap-datetimepicker/css/datetimepicker.css" rel="stylesheet">
    <link  href="/pages/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
    <script src="/pages/js/jquery-1.11.3.min.js"></script>
    <script src="/pages/js/bootstrap.min.js"></script>
    <script src="/pages/js/moment.min.js"></script>

前段部分代码如下所示

<div class="col-md-2">
                <div class="form-group">
                    <label>StartTime</label>
                    <div class="input-group date">
                        <input type='text' class="form-control" id="datetimepicker1" name="StartTime" value="${param.StartTime}"/>
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
                </div>
                <div class="col-md-2">
                    <div class="from-group">
                        <label>EndTime</label>
                        <div class="input-group date" >
                            <input type="text" class="form-control" id="datetimepicker2" name="EndTime" value="${param.EndTime}"/>
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>

js代码：

 $(function () {
         $('#datetimepicker1').datetimepicker({
            minView: "month", //选择日期后，不会再跳转去选择时分秒
            format: "yyyy-mm-dd", //选择日期后，文本框显示的日期格式
            language: 'zh-CN', //汉化
            showMeridian : true,//是否加上网格
            autoclose:true, //选择日期后自动关闭
            weekStart: 1,
            todayBtn: 1,

        });
         $('#datetimepicker2').datetimepicker({
            minView: "month", //选择日期后，不会再跳转去选择时分秒
            format: "yyyy-mm-dd", //选择日期后，文本框显示的日期格式
            language: 'zh-CN', //汉化
            showMeridian : true,//是否加上网格
            autoclose:true, //选择日期后自动关闭
            weekStart: 1,
            todayBtn:  1,
        });

结果显示图入下：

最后如果日历显示不出来。那么在浏览器的控制台看看哪里报错，js是只要有一个地方有error，接下来的代码都不会被执行。

转载于:https://www.cnblogs.com/NaCl/p/9637896.html