近期項(xiàng)目中用到日期控件，感覺不錯，寫出來分享給大家看看，我限制的開始時間和結(jié)束時間跨度不超過三天，并配置有清空時間，重選時間等功能，分享給大家：
先給大家看兩張效果圖
在例子中我控制的開始時間和結(jié)束時間為三天，也就是開始時間和結(jié)束時間的跨度不能超過三天。
具體是怎么實(shí)現(xiàn)的，代碼中會附有很詳細(xì)的解釋，請大家繼續(xù)往下看：
第一步，引入控件js，這里有兩個，一個是jquery.js，一個是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)建一個文本輸入框，text類型的input，我的demo中還寫入了清空時間的設(shè)置，也就是一個按鈕響應(yīng)事件
<td width="35%"> <label>開始時間：</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é)束時間：</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值這樣寫是為了查詢后刷新頁面的時候時間框中依然可以有選擇的時間值的。
下面的代碼就是調(diào)用日期控件的了，代碼如下：
$(function(){ // 獲取調(diào)用控件的對象 var dates = $("#start,#end"); var option; //設(shè)置目標(biāo)時間，因?yàn)槔又械拈_始時間和結(jié)束時間是有時間限制的 var targetDate; var optionEnd; var targetDateEnd; dates.datepicker({ showButtonPanel:false, //當(dāng)選擇時間的時候觸發(fā)此事件 onSelect: function(selectedDate){ if(this.id == "start"){ // 如果是選擇了開始時間 option = "minDate"; //getTimeByDateStr 這個方法的代碼下面會貼出來的，就是處理時間的代碼 var selectedTime = getTimeByDateStr(selectedDate); var minTime = selectedTime; targetDate = new Date(minTime); //設(shè)置結(jié)束時間 optionEnd = "maxDate"; targetDateEnd = new Date(minTime+2*24*60*60*1000); }else{ // 如果是選擇了結(jié)束時間 option = "maxDate"; var selectedTime = getTimeByDateStr(selectedDate); var maxTime = selectedTime; targetDate = new Date(maxTime); //設(shè)置開始時間 optionEnd = "minDate"; targetDateEnd = new Date(maxTime-2*24*60*60*1000); } //設(shè)置時間框中時間，比如根據(jù)選擇的開始時間，限制結(jié)束時間的不可選項(xiàng),dates.not(this)是js選擇器使用， //datepicker("option", option, targetDate),這個就是日期控件封裝的api了 dates.not(this).datepicker("option", option, targetDate); dates.not(this).datepicker("option", optionEnd, targetDateEnd); } });});下面先把上面代碼中g(shù)etTimeByDateStr(XXX) 方法的代碼貼出來，大家看的方便,這個代碼很簡單，相信大家一看便懂：
//根據(jù)日期字符串取得其時間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)日期控件的使用，并且開始時間和結(jié)束時間限制在三天以內(nèi)，比如你選擇了開始時間為2014-03-27，那么結(jié)束時間只有27，28，29三天可選，其余日期不可點(diǎn)擊，如果你選擇了結(jié)束時間為28，那么，現(xiàn)在開始時間就只能選擇28，27，26了，就這樣。
第三步：大家看清空按鈕，清空按鈕是清空時間選擇框中的值，這個實(shí)現(xiàn)起來很簡單了：
//清空日歷控件function cleaPrevInput(objs){ //清空輸入框中的值，但是僅僅是清空了值而已，時間控件的選值限制還在的 $(objs).prev().val(""); //如果開始時間和結(jié)束時間都清空了，這時應(yīng)該是你選擇的那個框中是沒有時間限制的，也就是說可以隨便選擇日期 if($('#start').val()=="" && $('#end').val()==""){ var dates = $("#start,#end"); //調(diào)用datepicker封裝的api，使剛剛設(shè)置的開始時間和結(jié)束時間為空，這樣就可以選擇任意日期了 dates.datepicker("option", "minDate", null); dates.datepicker("option", "maxDate", null); }}現(xiàn)在就可以使用了，如果只是使用控件，不需要設(shè)置時間限制就非常簡單了，上面代碼可以供多數(shù)日期選擇方面的需求使用了，但是如果有特殊的話，還需自己去查api吧，當(dāng)時我單單為了清空日期控件中的值，就是這句代碼：dates.datepicker("option", "maxDate", null)，就查了半天的api，還是需要大家有足夠的耐心。
以上就是關(guān)于jquery UI Datepicker時間控件的全部內(nèi)容介紹，暫時畫上了一個句號，以后再有相關(guān)文章，一定第一時間與大家分享。
新聞熱點(diǎn)
疑難解答
