前端框架: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
  下载链接:
  提取码:7n4c
⼆、⽰例
  要在head标签中引⼊所需的css和js。
  1、页⾯部分:
  如下图:
  在div的class 中要添加date ,设置的id要在js中使⽤。
  2、JS部分:
  使⽤$('#datetimepicker1').datetimepicker({});弹出时⽇期选择控件。
  其中:
  format:⽇期格式
  language:语⾔格式
  minView:控件显⽰到哪⼀级(month就是选择到⽇期,不显⽰⼏点⼏分)
  autoclose:设置为true 时,选择完⽇期就⾃动关闭
  todayBtn:默认当前时间
<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 >设置纵向自动滚动条css
  <input type ="text" class ="form-control" placeholder ="" id ="xmjhqssj" />
  <span class ="input-group-addon">
    <span class ="glyphicon glyphicon-calendar"></span >
  </span >
</div ><script type ="text/javascript">
$(document).ready(function () {
$('#datetimepicker1').datetimepicker({
format : 'yyyy-mm-dd',
language: 'zh-CN',
minView: "month",//设置只显⽰到⽉份
autoclose: true ,
todayBtn: "linked"
});
});
</script >
三、问题解决
  1、有时弹出的⽇期控件会出现如下情况:
  此时需要在引⼊的bootstrap-datetimepicker.min.css⽂件中进⾏修改:
  设置width和height限制宽⾼,并将纵向滚动条隐藏,最终效果如下: