bootstrap-datetimepicker插件双日期的设置

效果：第二个日期控件选中的时间不能小于第一个

1、页面上需要引用

　　

css:
<link rel="stylesheet" href="css/bootstrap.min.css" /> //这个也要引入，否则页面样式会出问题
<link rel="stylesheet" href="plugin/css/bootstrap-datetimepicker.css" />

js:

<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script src="js/bootstrap.min.js"></script>
<script src="plugin/js/bootstrap-datetimepicker.js"></script>
<script src="plugin/js/bootstrap-datetimepicker.zh-CN.js"></script>

2、直接在input上调用 datetimepicker()

<input size="16" type="text" id="datetimeStart" readonly class="form_datetime">
--
<input size="16" type="text" id="datetimeEnd" readonly class="form_datetime">

效果：

js代码：

<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".val()))
    });
</script>

3、组件的方式使用

<label class="labe_l">发货日期:</label>
<div class="clearfix tex_t reset_text">
　　<div class="input-append date fl"  id="datetimeStart">
        <input type="text" class="" readonly>
        <span class="add-on"><i class="icon-th"></i></span> 
    </div>
    <span class="to_link">至</span>
    <div class="input-append date fl"  id="datetimeEnd">
         <input type="text" class="" readonly>
         <span class="add-on"><i class="icon-th"></i></span> 
    </div>
</div>

效果：

js代码：

<script>
     //日期插件初始化      
     $('#datetimeStart').datetimepicker({
         language:  'zh-CN', 
         format:'yyyy-mm-dd', 
         weekStart: 1, /*以星期一为一星期开始*/
         todayBtn:  1,
         autoclose: 1, 
         minView:2, /*精确到天*/
         pickerPosition: "bottom-left" 
      }).on("changeDate",function(ev){  //值改变事件
         //选择的日期不能大于第二个日期控件的日期
         if(ev.date){
              $("#datetimeEnd").datetimepicker('setStartDate', new Date(ev.date.valueOf()));
          }else{
              $("#datetimeEnd").datetimepicker('setStartDate',null);
          }
      });
      $('#datetimeEnd').datetimepicker({
           language:  'zh-CN', 
           format:'yyyy-mm-dd', 
           weekStart: 1, /*以星期一为一星期开始*/
           todayBtn:  1,
           autoclose: 1, 
           minView:2, /*精确到天*/
           pickerPosition: "bottom-left"
        }).on("changeDate",function(ev){
           //选择的日期不能小于第一个日期控件的日期
           if(ev.date){
                $("#datetimeStart").datetimepicker('setEndDate', new Date(ev.date.valueOf()));
           }else{
                $("#datetimeStart").datetimepicker('setEndDate',new Date());
           }
        });         
 </script>