Bootstrap的DatePicker屬性怎麼選擇日期範圍

這次帶給大家Bootstrap的DatePicker屬性怎麼選擇日期範圍，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實作日期選擇開始日期不大於結束時間，結束時間不小於開始時間，開始日期和結束日期都不大於當前日期。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

ajax實作註冊使用者名稱全套流程

Ajax+PHP的資料互動實作

以上是Bootstrap的DatePicker屬性怎麼選擇日期範圍的詳細內容。更多資訊請關注PHP中文網其他相關文章！