jqueryUIDatepicker时间控件的使⽤⽅法（终结版）
近期项⽬中⽤到⽇期控件，感觉不错，写出来分享给⼤家看看，我限制的开始时间和结束时间跨度不超过三天，并配置有清空时间，重选时间等功能，分享给⼤家：
先给⼤家看两张效果图
在例⼦中我控制的开始时间和结束时间为三天，也就是开始时间和结束时间的跨度不能超过三天。
具体是怎么实现的，代码中会附有很详细的解释，请⼤家继续往下看：
第⼀步，引⼊控件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="${d}" 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"){
jquery插件分享// 如果是选择了开始时间
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);
}
//设置时间框中时间，⽐如根据选择的开始时间，限制结束时间的不可选项,(this)是js选择器使⽤，
//datepicker("option", option, targetDate)，这个就是⽇期控件封装的api了
<(this).datepicker("option", option, targetDate);
<(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);
}
}
现在就可以使⽤了，如果只是使⽤控件，不需要设置时间限制就⾮常简单了，上⾯代码可以供多数⽇期选择⽅⾯的需求使⽤了，但是如果有特殊的话，还需⾃⼰去查api吧，当时我单单为了清空⽇期控件中的值，就是这句代码：
dates.datepicker("option", "maxDate", null)，就查了半天的api，还是需要⼤家有⾜够的耐⼼。
以上就是关于jquery UI Datepicker时间控件的全部内容介绍，暂时画上了⼀个句号，以后再有相关⽂章，⼀定第⼀时间与⼤家分享。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。