前端框架：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限制宽⾼，并将纵向滚动条隐藏，最终效果如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。