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

  

 

posted @ 2020-02-05 22:03  我命倾尘  阅读(3101)  评论(0编辑  收藏  举报