快捷導(dǎo)航

jquery UI Datepicker時(shí)間控件的使用方法（終結(jié)版）

更新時(shí)間：2015年11月07日 11:46:46 投稿：lijiao

這篇文章是jquery UI Datepicker時(shí)間控件的使用方法終結(jié)版，可以說(shuō)是技術(shù)的升華，實(shí)現(xiàn)的功能有限制的開(kāi)始時(shí)間和結(jié)束時(shí)間跨度不超過(guò)三天，并配置有清空時(shí)間，重選時(shí)間等，感興趣的小伙伴們可以參考一下

近期項(xiàng)目中用到日期控件，感覺(jué)不錯(cuò)，寫(xiě)出來(lái)分享給大家看看，我限制的開(kāi)始時(shí)間和結(jié)束時(shí)間跨度不超過(guò)三天，并配置有清空時(shí)間，重選時(shí)間等功能，分享給大家：
先給大家看兩張效果圖

在例子中我控制的開(kāi)始時(shí)間和結(jié)束時(shí)間為三天，也就是開(kāi)始時(shí)間和結(jié)束時(shí)間的跨度不能超過(guò)三天。

具體是怎么實(shí)現(xiàn)的，代碼中會(huì)附有很詳細(xì)的解釋，請(qǐng)大家繼續(xù)往下看：

第一步，引入控件js，這里有兩個(gè)，一個(gè)是jquery.js，一個(gè)是jquery-ui-datepicker.js，當(dāng)然還有引入樣式文件：

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery-ui-datepicker.js"></script> 
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />

第二步：創(chuàng)建一個(gè)文本輸入框，text類型的input，我的demo中還寫(xiě)入了清空時(shí)間的設(shè)置，也就是一個(gè)按鈕響應(yīng)事件

<td width="35%">
    <label>開(kāi)始時(shí)間：</label>
    <input type="text" name="start" id="start" value="${params.start}" readonly="true" title="日期范圍不能大于3天"/>
    <input type="button" class="formButton" value="清空" onclick="cleaPrevInput(this);"/>
    <font color="red">必選*</font>
   </td>
   <td width="35%">
    <label>結(jié)束時(shí)間：</label>
    <input type="text" name="end" id="end" value="${params.end}" readonly="true" title="日期范圍不能大于3天"/>
    <input type="button" class="formButton" value="清空" onclick="cleaPrevInput(this);"/>
    <font color="red">必選*</font>
   </td>

里面value的值不用管，我這是寫(xiě)在項(xiàng)目中的代碼，value值這樣寫(xiě)是為了查詢后刷新頁(yè)面的時(shí)候時(shí)間框中依然可以有選擇的時(shí)間值的。

下面的代碼就是調(diào)用日期控件的了，代碼如下：

$(function(){
 // 獲取調(diào)用控件的對(duì)象
 var dates = $("#start,#end");
 var option;
 //設(shè)置目標(biāo)時(shí)間，因?yàn)槔又械拈_(kāi)始時(shí)間和結(jié)束時(shí)間是有時(shí)間限制的
 var targetDate;
 var optionEnd;
 var targetDateEnd;
 dates.datepicker({
  showButtonPanel:false,
  //當(dāng)選擇時(shí)間的時(shí)候觸發(fā)此事件
  onSelect: function(selectedDate){ 
   if(this.id == "start"){
   // 如果是選擇了開(kāi)始時(shí)間
   option = "minDate";
   //getTimeByDateStr 這個(gè)方法的代碼下面會(huì)貼出來(lái)的，就是處理時(shí)間的代碼
   var selectedTime = getTimeByDateStr(selectedDate);
   var minTime = selectedTime;
   targetDate = new Date(minTime);
   //設(shè)置結(jié)束時(shí)間
   optionEnd = "maxDate";
   targetDateEnd = new Date(minTime+2*24*60*60*1000);
   }else{
   // 如果是選擇了結(jié)束時(shí)間
   option = "maxDate";
   var selectedTime = getTimeByDateStr(selectedDate);
   var maxTime = selectedTime;
   targetDate = new Date(maxTime);
   //設(shè)置開(kāi)始時(shí)間
   optionEnd = "minDate";
   targetDateEnd = new Date(maxTime-2*24*60*60*1000);

   }
   //設(shè)置時(shí)間框中時(shí)間，比如根據(jù)選擇的開(kāi)始時(shí)間，限制結(jié)束時(shí)間的不可選項(xiàng),dates.not(this)是js選擇器使用，
   //datepicker("option", option, targetDate),這個(gè)就是日期控件封裝的api了
   dates.not(this).datepicker("option", option, targetDate); 
   dates.not(this).datepicker("option", optionEnd, targetDateEnd); 
  }
 });
});

下面先把上面代碼中g(shù)etTimeByDateStr(XXX) 方法的代碼貼出來(lái)，大家看的方便,這個(gè)代碼很簡(jiǎn)單，相信大家一看便懂：

//根據(jù)日期字符串取得其時(shí)間
function getTimeByDateStr(dateStr){
 var year = parseInt(dateStr.substring(0,4));
 var month = parseInt(dateStr.substring(5,7),10)-1;
 var day = parseInt(dateStr.substring(8,10),10);
 return new Date(year, month, day).getTime();
}

代碼到現(xiàn)在就可以實(shí)現(xiàn)日期控件的使用，并且開(kāi)始時(shí)間和結(jié)束時(shí)間限制在三天以內(nèi)，比如你選擇了開(kāi)始時(shí)間為2014-03-27，那么結(jié)束時(shí)間只有27，28，29三天可選，其余日期不可點(diǎn)擊，如果你選擇了結(jié)束時(shí)間為28，那么，現(xiàn)在開(kāi)始時(shí)間就只能選擇28，27，26了，就這樣。

第三步：大家看清空按鈕，清空按鈕是清空時(shí)間選擇框中的值，這個(gè)實(shí)現(xiàn)起來(lái)很簡(jiǎn)單了：

//清空日歷控件
function cleaPrevInput(objs){
 //清空輸入框中的值，但是僅僅是清空了值而已，時(shí)間控件的選值限制還在的
 $(objs).prev().val("");
 //如果開(kāi)始時(shí)間和結(jié)束時(shí)間都清空了，這時(shí)應(yīng)該是你選擇的那個(gè)框中是沒(méi)有時(shí)間限制的，也就是說(shuō)可以隨便選擇日期
 if($('#start').val()=="" && $('#end').val()==""){
 var dates = $("#start,#end");
 //調(diào)用datepicker封裝的api，使剛剛設(shè)置的開(kāi)始時(shí)間和結(jié)束時(shí)間為空，這樣就可以選擇任意日期了
 dates.datepicker("option", "minDate", null);
 dates.datepicker("option", "maxDate", null);
 }
}

現(xiàn)在就可以使用了，如果只是使用控件，不需要設(shè)置時(shí)間限制就非常簡(jiǎn)單了，上面代碼可以供多數(shù)日期選擇方面的需求使用了，但是如果有特殊的話，還需自己去查api吧，當(dāng)時(shí)我單單為了清空日期控件中的值，就是這句代碼：dates.datepicker("option", "maxDate", null)，就查了半天的api，還是需要大家有足夠的耐心。

以上就是關(guān)于jquery UI Datepicker時(shí)間控件的全部?jī)?nèi)容介紹，暫時(shí)畫(huà)上了一個(gè)句號(hào)，以后再有相關(guān)文章，一定第一時(shí)間與大家分享。

您可能感興趣的文章: