jquery-ui-datepicker，日期控件的使用

近期項目中用到日期控件，感受不錯，寫出來分享給你們看看，先給你們看兩張效果圖

在例子中我控制的開始時間和結束時間爲三天，也就是開始時間和結束時間的跨度不能超過三天。

具體是怎麼實現的，我就不廢話了，開寫貼代碼了，代碼中會附有很詳細的解釋，請你們繼續往下看：

第一步，引入控件js，這裏有兩個，一個是jquery.js，一個是jquery-ui-datepicker.js,固然還有引入樣式文件：

<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" />

第二步：建立一個文本輸入框，text類型的input，個人demo中還寫入了清空時間的設置，也就是一個按鈕響應事件

<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>結束時間：</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的值不用管，我這是寫在項目中的代碼，value值這樣寫是爲了查詢後刷新頁面的時候時間框中依然能夠有選擇的時間值的。

下面的代碼就是調用日期控件的了，代碼以下：

$(function(){
    // 獲取調用控件的對象
    var dates = $("#start,#end");
    var option;
    //設置目標時間，由於例子中的開始時間和結束時間是有時間限制的
    var targetDate;
    var optionEnd;
    var targetDateEnd;
    dates.datepicker({
        showButtonPanel:false,
        //當選擇時間的時候觸發此事件
        onSelect: function(selectedDate){  
          if(this.id == "start"){
            // 若是是選擇了開始時間
            option = "minDate";
            //getTimeByDateStr 這個方法的代碼下面會貼出來的，就是處理時間的代碼
            var selectedTime = getTimeByDateStr(selectedDate);
            var minTime = selectedTime;
            targetDate = new Date(minTime);
            //設置結束時間
            optionEnd = "maxDate";
            targetDateEnd = new Date(minTime+2*24*60*60*1000);
          }else{
            // 若是是選擇告終束時間
            option = "maxDate";
            var selectedTime = getTimeByDateStr(selectedDate);
            var maxTime = selectedTime;
            targetDate = new Date(maxTime);
            //設置開始時間
            optionEnd = "minDate";
            targetDateEnd = new Date(maxTime-2*24*60*60*1000);

          }
          //設置時間框中時間，好比根據選擇的開始時間，限制結束時間的不可選項,dates.not(this)是js選擇器使用，
          //datepicker("option", option, targetDate),這個就是日期控件封裝的api了
          dates.not(this).datepicker("option", option, targetDate);  
          dates.not(this).datepicker("option", optionEnd, targetDateEnd); 
        }
    });
});

下面先把上面代碼中getTimeByDateStr(XXX) 方法的代碼貼出來，你們看的方便,這個代碼很簡單，你們一看便懂：

//根據日期字符串取得其時間
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();
}

代碼到如今就能夠實現日期控件的使用，而且開始時間和結束時間限制在三天之內，好比你選擇了開始時間爲2014-03-27，那麼結束時間只有27，28，29三天可選，其他日期不可點擊，若是你選擇告終束時間爲28，那麼，如今開始時間就只能選擇28，27，26了，就這樣。

第三步：你們看清空按鈕，清空按鈕是清空時間選擇框中的值，這個實現起來很簡單了：

//清空日曆控件
function cleaPrevInput(objs){
	//清空輸入框中的值，可是僅僅是清空了值而已，時間控件的選值限制還在的
	$(objs).prev().val("");
	//若是開始時間和結束時間都清空了，這時應該是你選擇的那個框中是沒有時間限制的，也就是說能夠隨便選擇日期
	if($('#start').val()=="" && $('#end').val()==""){
		var dates = $("#start,#end");
		//調用datepicker封裝的api，使剛剛設置的開始時間和結束時間爲空，這樣就能夠選擇任意日期了
		dates.datepicker("option", "minDate", null);
		dates.datepicker("option", "maxDate", null);
	}
}

如今就能夠使用了，若是隻是使用控件，不須要設置時間限制就很是簡單了，網上的demo不少。上面代碼能夠供多很多天期選擇方面的需求使用了，可是若是有特殊的話，仍是本身去查api吧，當時我單單爲了清空日期控件中的值，就是這句代碼：dates.datepicker("option", "maxDate", null),就查了半天的api，尼瑪，英語很差傷不起啊，好了，不說了，自小體育老師死的早，描述能力不行，就寫到這吧，代碼能夠直接copy下來用的