BootStrap3中日期选择器的使用

快来打我* 2023-06-19 03:00 8阅读 0赞

## 需要用到的css、js文件如下 ##

**版本截图如下：**

![20191204134531552.png][]

**引用示例：**

//CSS
        <link href="${path}/static/css/bootstrap.min.css" rel="stylesheet">
        <link href="${path}/static/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    
        //JS
        <%--jquery必须放在其他js文件之前--%>
        <script src="${path}/static/js/jquery.min.js"></script>
        <%--bootstrap日期选择器国际化包--%>
        <script src="${path}/static/js/moment-with-locales.min.js"></script>
        <script src="${path}/static/js/bootstrap.min.js"></script>
        <%--bootstrap日期选择器包--%>
        <script src="${path}/static/js/bootstrap-datetimepicker.min.js"></script>

//示例代码                    
    <div class="form-group">
         <label class="col-sm-2 control-label">出版日期</label>
             <div class="col-sm-10">
                   <input type="text" class="form-control" id="input_book_published"
                                       placeholder="book published">
             </div>
     </div>

**js代码**

//日期选择器
        $('#input_book_published').datetimepicker({
            //'dddd YYYY年MM月DD日 HH:mm:ss' 星期几 年月日 时分秒
            //YYYY年MM月DD日 HH:mm:ss' 年月日 时分秒
            format: 'YYYY-MM-DD',
            //国际化，这里指中文
            language: "zh-CN",
            //判断日期是否改变，改变就将日期选择框关闭
        }).on('dp.change', function (ev) {
            var newDateTime = ev.date ? ev.date.format('yyyy-MM-dd HH:mm:ss') : "";
            var oldDateTime = ev.oldDate ? ev.oldDate.format('yyyy-MM-dd HH:mm:ss') : "";
            if (newDateTime != oldDateTime) {
                $(this).data("DateTimePicker").hide();
            }
        });

**成功截图**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXFpYW5nOTE1_size_16_color_FFFFFF_t_70][]

[20191204134531552.png]: https://img-blog.csdnimg.cn/20191204134531552.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXFpYW5nOTE1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191204134923193.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXFpYW5nOTE1,size_16,color_FFFFFF,t_70