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>