bootstrap之datetimepicker(日期时间选择器)插件详细使用方法

1.介绍

datetimepicker是bootstrap中的一款日期和时间选择器，其使用和配置方法较为简单

2.首先需要引入的js和css文件：

css：

bootstrap.min.css(含有bootstrap 所有css)

bootstrap-datetimepicker.min.css(日期控件所需的样式表)

js：

jquery-1.11.1.min.js(其他版本的jquery也可以)

bootstrap.min.js(含有bootstrap 所有js)

bootstrap-datetimepicker.js(日期控件所需的js)

bootstrap-datetimepicker.zh-CN.js(日期控件中文文件)

说明：引入js时，jquery-1.11.1.min.js必须在bootstrap.min.js之前。后者依托前者。

3.使用方法

3.1普通日期选择

添加选择器的input输入框

<input id="datetimeStart" value="2016-09-14">

js文件中的配置：

$('#datetimeStart').datetimepicker({

    format: 'yyyy.mm',  //显示格式可为yyyymm/yyyy-mm-dd/yyyy.mm.dd  
    weekStart: 1,  <span style="white-space:pre">   </span>//0-周日,6-周六 。默认为0  
    autoclose: true,    
    startView: 3,  <span style="white-space:pre">   </span>//打开时显示的视图。0-'hour' 1-'day' 2-'month' 3-'year' 4-'decade'   
    minView: 3,  <span style="white-space:pre"> </span>//最小时间视图。默认0-'hour'  
//  maxView: 4, <span style="white-space:pre">  </span>//最大时间视图。默认4-'decade'  
//  todayBtn:true, <span style="white-space:pre">   </span>//true时"今天"按钮仅仅将视图转到当天的日期。如果是'linked'，当天日期将会被选中。   
//  todayHighlight:true,<span style="white-space:pre">  </span>//默认值: false,如果为true, 高亮当前日期。  
    initialDate: new Date(),<span style="white-space:pre">  </span>//初始化日期.默认new Date()当前日期  
    forceParse: false,  <span style="white-space:pre">  </span>//当输入非格式化日期时，强制格式化。默认true  
    bootcssVer:3,<span style="white-space:pre"> </span>//显示向左向右的箭头  
    language: 'zh-CN' //语言  
});  

3.2两个日期控件。使得开始日期与结束日期之间建立相互约束关系。即开始日期不能大于结束日期，结束日期不能小于开始日期。

<pre name="code" class="javascript"><p><span style="font-size:18px;">html代码：  
<span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">input </span><span style="color: rgb(255, 0, 0);">size</span><span style="color: rgb(0, 0, 255);">="16"</span><span style="color: rgb(255, 0, 0);"> type</span><span style="color: rgb(0, 0, 255);">="text"</span><span style="color: rgb(255, 0, 0);"> id</span><span style="color: rgb(0, 0, 255);">="datetimeStart"</span><span style="color: rgb(255, 0, 0);"> readonly class</span><span style="color: rgb(0, 0, 255);">="form_datetime"</span><span style="color: rgb(0, 0, 255);">>  
</span>--  
<span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">input </span><span style="color: rgb(255, 0, 0);">size</span><span style="color: rgb(0, 0, 255);">="16"</span><span style="color: rgb(255, 0, 0);"> type</span><span style="color: rgb(0, 0, 255);">="text"</span><span style="color: rgb(255, 0, 0);"> id</span><span style="color: rgb(0, 0, 255);">="datetimeEnd"</span><span style="color: rgb(255, 0, 0);"> readonly class</span><span style="color: rgb(0, 0, 255);">="form_datetime"</span></span><span style="font-size:18px;"><span style="color:#0000ff;">></span></span></p><p><span style="font-size:18px;"><span style="color:#0000ff;">  
</span><a href="https://lib.csdn.net/base/javascript" class="replace_word" title="JavaScript知识库" target="_blank" style="color:#df3434; font-weight:bold;">js</a>代码：  
</span></p><pre><span style="font-size:18px;"><script type="text/javascript">  
    $("#datetimeStart").datetimepicker({  
        format: 'yyyy-mm-dd',  
        minView:'month',  
        language: 'zh-CN',  
        autoclose:true,  
        startDate:new Date()  
    }).on("click",function(){  
        $("#datetimeStart").datetimepicker("setEndDate",$("#datetimeEnd").val())  
    });  
    $("#datetimeEnd").datetimepicker({  
        format: 'yyyy-mm-dd',  
        minView:'month',  
        language: 'zh-CN',  
        autoclose:true,  
        startDate:new Date()  
    }).on("click",function(){  
        $("#datetimeEnd").datetimepicker("setStartDate",$("#datetimeStart")<span style="font-family: Arial, Helvetica, sans-serif;">.val())</span>  
    });  
</script></span></pre><pre><span style="font-size:18px">  
</span></pre><pre><span style="font-size:18px">效果如下：</span>  
<img src="" alt="">  
<span style="font-size:18px">参考：https://www.cnblogs.com/gscq073240/articles/6413972.html  
  
</span><h1><a name="t3"></a><span style="font-size:18px">4.补充</span></h1><span style="font-size:18px"><img src="" alt="">  
效果图在官网下载的演示文件中。</span></pre><p></p></pre>