這篇文章是jquery UI Datepicker時(shí)間控件的使用方法終結(jié)版，實(shí)現(xiàn)的功能有限制的開始時(shí)間和結(jié)束時(shí)間跨度不超過三天，并配置有清空時(shí)間，重選時(shí)間等。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)大家有所幫助。

先給大家看兩張效果圖

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

具體是怎么實(shí)現(xiàn)的，代碼中會(huì)附有很詳細(xì)的解釋，請大家繼續(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中還寫入了清空時(shí)間的設(shè)置，也就是一個(gè)按鈕響應(yīng)事件

<td width="35%">     <label>開始時(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àng)目中的代碼，value值這樣寫是為了查詢后刷新頁面的時(shí)候時(shí)間框中依然可以有選擇的時(shí)間值的。

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

$(function(){  // 獲取調(diào)用控件的對(duì)象  var dates = $("#start,#end");  var option;  //設(shè)置目標(biāo)時(shí)間，因?yàn)槔又械拈_始時(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"){    // 如果是選擇了開始時(shí)間    option = "minDate";    //getTimeByDateStr 這個(gè)方法的代碼下面會(huì)貼出來的，就是處理時(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è)置開始時(shí)間    optionEnd = "minDate";    targetDateEnd = new Date(maxTime-2*24*60*60*1000);     }    //設(shè)置時(shí)間框中時(shí)間，比如根據(jù)選擇的開始時(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) 方法的代碼貼出來，大家看的方便,這個(gè)代碼很簡單，相信大家一看便懂：

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

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

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

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