Bootstrap的DatePicker日期范围选择

用日期插件时，常常会有一种需求。两个input框选择。开始时间小于结束时间，结束时间大于开始时间，开始时间和结束时间都不大于当前时间。

咱们固然能够用选择的结果来判断输入正确与否。可是更好的办法是让咱们的日期选择插件作出一些限制。

Bootstrap搭配了很优秀的日期选择插件。DatePicker和DateTimePicker。

二者功能很相似。使用方法也是差很少的。DatePicker支持更多的事件和设置。

看api知道日期变化的时候会有一个事件changeDate。当选择的日期变化的时候，会调用咱们给这个事件的回调。可是遗憾的是当咱们直接在输 入框中输入或删除日期的时候貌似并不会触发到这个事件。因此能够把input框添加属性 readonly。只读状态，而且给日期控件一个清除按钮。这样日期的变化正常状况下就只有经过日期插件来控制了。

然而当使用DateTimePicker插件点击清除按钮的时候，会报错 Uncaught TypeError: Cannot read property 'getTime' of null，结果致使changeDate事件也不能正常使用。

因此就改用DatePicker插件。   

而后当一个输入框日期变化（包括清除）的时候，changeDate事件触发，在其回调函数里修改另外一个输入框的可选范围。  

另外，DatePicker要使界面显示中文，也须要加载css。bootstrap-datepicker.zh-CN.min.js。

 

 

function DatePicker(beginSelector,endSelector){  
          // 仅选择日期  
          $(beginSelector).datepicker(  
          {  
            language:  "zh-CN",  
            autoclose: true,  
            startView: 0,  
            format: "yyyy-mm-dd",  
            clearBtn:true,  
            todayBtn:false,  
            endDate:new Date()  
          }).on('changeDate', function(ev){               
            if(ev.date){  
                $(endSelector).datepicker('setStartDate', new Date(ev.date.valueOf()))  
            }else{  
                $(endSelector).datepicker('setStartDate',null);  
            }  
          })  
  
          $(endSelector).datepicker(  
          {  
            language:  "zh-CN",  
            autoclose: true,  
            startView:0,  
            format: "yyyy-mm-dd",  
            clearBtn:true,  
            todayBtn:false,  
            endDate:new Date()  
          }).on('changeDate', function(ev){    
            if(ev.date){  
                $(beginSelector).datepicker('setEndDate', new Date(ev.date.valueOf()))  
            }else{  
                $(beginSelector).datepicker('setEndDate',new Date());  
            }   
  
          })  
      }  
  
      DatePicker("#date_begin","#date_end"); 

 

Bootstrap DatePicker实现日期选择 开始日期不大于结束时间，结束时间不小于开始时间，开始日期和结束日期都不大于当前日期。

演示地址：http://runningls.com/demos/2016/daily/datepicker/

github:https://github.com/liusaint/JavaScript-record/tree/master/datepicker

转载注明出处：http://blog.csdn.net/liusaint1992/article/details/52590681