前端框架：bootstrap-datetimepicker日期控件的使用

一、控件下載

　　1、控件使用所需（CSS和JS）：

　　　　bootstrap.min.css

　　　　bootstrap-datetimepicker.min.css

　　　　jquery.min.js

　　　　bootstrap.min.js

　　　　bootstrap-datetimepicker.min.js

　　　　bootstrap-datetimepicker.zh-CN.js

　　下載鏈接：https://pan.baidu.com/s/1zKgB8dHYsbYh4L6cKvPcKQ

　　提取碼：7n4c

二、示例

　　要在head標簽中引入所需的css和js。

　　1、頁面部分：

<div class="input-group date form_datetime"id='datetimepicker1'style="float: left; width: 40%; margin-left: 5%;">
　　<span class="input-group-addon">
　　　　<span style="color: #337ab7;">
　　　　　　<b>
　　　　　　　　計划起始時間
　　　　　　</b>
　　　　</span>
　　</span> 
　　<input type="text" class="form-control" placeholder="" id="xmjhqssj" /> 
　　<span class="input-group-addon"> 
　　　　<span class="glyphicon glyphicon-calendar"></span>
　　</span>
</div>

　　如下圖：

　　

　　在div的class中要添加date，設置的id要在js中使用。

 　　2、JS部分：

<script type="text/javascript">
    $(document).ready(function() {
        $('#datetimepicker1').datetimepicker({
            format : 'yyyy-mm-dd',
            language: 'zh-CN',
            minView: "month",//設置只顯示到月份
            autoclose: true,
            todayBtn: "linked"
        });
    });
</script>

　　使用$('#datetimepicker1').datetimepicker({});彈出時日期選擇控件。

　　其中：

　　format：日期格式

　　language：語言格式

　　minView：控件顯示到哪一級（month就是選擇到日期，不顯示幾點幾分）

　　autoclose：設置為true時，選擇完日期就自動關閉

　　todayBtn：默認當前時間

三、問題解決

　　1、有時彈出的日期控件會出現如下情況：

　　

　　此時需要在引入的bootstrap-datetimepicker.min.css文件中進行修改：

 

　　

 　　設置width和height限制寬高，並將縱向滾動條隱藏，最終效果如下：