看api知道日期變化的時候會有一個事件changeDate。當選擇的日期變化的時候，會調用我們給這個事件的回調。但是遺憾的是當我們直接在輸入框中輸入或刪除日期的時候貌似并不會觸發(fā)到這個事件。所以可以把input框添加屬性 readonly。只讀狀態(tài)，并且給日期控件一個清除按鈕。這樣日期的變化正常情況下就只有通過日期插件來控制了。

然而當使用DateTimePicker插件點擊清除按鈕的時候，會報錯 Uncaught TypeError: Cannot read property 'getTime' of null，結果導致changeDate事件也不能正常使用。

所以就改用DatePicker插件。

然后當一個輸入框日期變化（包括清除）的時候，changeDate事件觸發(fā)，在其回調函數(shù)里修改另一個輸入框的可選范圍。

另外，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實現(xiàn)日期選擇開始日期不大于結束時間，結束時間不小于開始時間，開始日期和結束日期都不大于當前日期。

以上就是小編為大家?guī)淼臏\談Bootstrap的DatePicker日期范圍選擇全部內容了，希望大家多多支持腳本之家~

您可能感興趣的文章: