主頁 > 知識庫 > 淺談Bootstrap的DatePicker日期范圍選擇

淺談Bootstrap的DatePicker日期范圍選擇

熱門標(biāo)簽:怎樣在地圖標(biāo)注文字 河間市地圖標(biāo)注app 中國地圖標(biāo)注不明確情況介紹表 地圖標(biāo)注推銷坑人 東平縣地圖標(biāo)注app 上海企業(yè)外呼系統(tǒng)價錢 大眾點評400電話怎么申請 立陶宛地圖標(biāo)注 電銷機(jī)器人 長春

用日期插件時,經(jīng)常會有一種需求。兩個input框選擇。開始時間小于結(jié)束時間,結(jié)束時間大于開始時間,開始時間和結(jié)束時間都不大于當(dāng)前時間。

我們當(dāng)然可以用選擇的結(jié)果來判斷輸入正確與否。但是更好的辦法是讓我們的日期選擇插件做出一些限制。

Bootstrap搭配了很優(yōu)秀的日期選擇插件。DatePicker和DateTimePicker。

兩者功能很類似。使用方法也是差不多的。DatePicker支持更多的事件和設(shè)置。

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

然而當(dāng)使用DateTimePicker插件點擊清除按鈕的時候,會報錯 Uncaught TypeError: Cannot read property 'getTime' of null,結(jié)果導(dǎo)致changeDate事件也不能正常使用。

所以就改用DatePicker插件。  

然后當(dāng)一個輸入框日期變化(包括清除)的時候,changeDate事件觸發(fā),在其回調(diào)函數(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)日期選擇 開始日期不大于結(jié)束時間,結(jié)束時間不小于開始時間,開始日期和結(jié)束日期都不大于當(dāng)前日期。

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

您可能感興趣的文章:
  • bootstrap datepicker的基本使用教程
  • JS控件bootstrap datepicker使用方法詳解
  • BootStrap Datepicker 插件修改為默認(rèn)中文的實現(xiàn)方法
  • bootstrap datepicker限定可選時間范圍實現(xiàn)方法
  • bootstrap datepicker 與bootstrapValidator同時使用時選擇日期后無法正常觸發(fā)校驗的解決思路
  • BootStrap中Datepicker控件帶中文的js文件
  • BootStrap的Datepicker控件使用心得分享
  • bootstrap 日期控件 datepicker被彈出框dialog覆蓋的解決辦法

標(biāo)簽:內(nèi)江 益陽 四川 玉樹 銅川 遼寧 本溪 營口

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《淺談Bootstrap的DatePicker日期范圍選擇》,本文關(guān)鍵詞  淺談,Bootstrap,的,DatePicker,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《淺談Bootstrap的DatePicker日期范圍選擇》相關(guān)的同類信息!
  • 本頁收集關(guān)于淺談Bootstrap的DatePicker日期范圍選擇的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章