這篇文章給大家分享的是有關(guān)Bootstrap中DatePicker怎么用的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)公司專注于企業(yè)全網(wǎng)整合營(yíng)銷推廣、網(wǎng)站重做改版、醴陵網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5技術(shù)、購(gòu)物商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為醴陵等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

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

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

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

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

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

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

所以就改用DatePicker插件。

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

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

感謝各位的閱讀！關(guān)于“Bootstrap中DatePicker怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

當(dāng)前題目：Bootstrap中DatePicker怎么用-創(chuàng)新互聯(lián)
鏈接分享：http://aaarwkj.com/article26/cccdjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、虛擬主機(jī)、企業(yè)建站、靜態(tài)網(wǎng)站、網(wǎng)站維護(hù)、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)