這篇文章是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>$(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);
}
});
});//根据日期字符串取得其时间
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();
}第三步：大家看清空按鈕，清空按鈕是清空時間選擇框中的值，這個實作起來很簡單了：
//清空日历控件
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);
}
}jquery UI Datepicker時間控制項的用法（一）
jquery UI Datepicker時間控制項的用法（二）
相關影片教學推薦：jQuery教學（影片）
以上是jquery UI Datepicker時間控制項的用法（三）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
