本文摘自PHP中文网,作者PHPzhong,侵删。
这篇文章是jquery UI Datepicker时间控件的使用方法终结版,实现的功能有限制的开始时间和结束时间跨度不超过三天,并配置有清空时间,重选时间等。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。先给大家看两张效果图
在例子中我控制的开始时间和结束时间为三天,也就是开始时间和结束时间的跨度不能超过三天。
具体是怎么实现的,代码中会附有很详细的解释,请大家继续往下看:
第一步,引入控件js,这里有两个,一个是jquery.js,一个是jquery-ui-datepicker.js,当然还有引入样式文件:
1 2 3 | <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中还写入了清空时间的设置,也就是一个按钮响应事件
1 2 3 4 5 6 7 8 9 10 11 12 | <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值这样写是为了查询后刷新页面的时候时间框中依然可以有选择的时间值的。
下面的代码就是调用日期控件的了,代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | $( 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" ;
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 ).datepicker( "option" , option, targetDate);
dates.not( this ).datepicker( "option" , optionEnd, targetDateEnd);
}
});
});
|
下面先把上面代码中getTimeByDateStr(XXX) 方法的代码贴出来,大家看的方便,这个代码很简单,相信大家一看便懂:
1 2 3 4 5 6 7 | 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了,就这样。
第三步:大家看清空按钮,清空按钮是清空时间选择框中的值,这个实现起来很简单了:
1 2 3 4 5 6 7 8 9 10 11 12 | function cleaPrevInput(objs){
$(objs).prev().val( "" );
if ($( '#start' ).val()== "" && $( '#end' ).val()== "" ){
var dates = $( "#start,#end" );
dates.datepicker( "option" , "minDate" , null );
dates.datepicker( "option" , "maxDate" , null );
}
}
|
现在就可以使用了,如果只是使用控件,不需要设置时间限制就非常简单了,上面代码可以供多数日期选择方面的需求使用了,但是如果有特殊的话,还需自己去查api吧,当时我单单为了清空日期控件中的值,就是这句代码:dates.datepicker("option", "maxDate", null),就查了半天的api,还是需要大家有足够的耐心。
以上就是关于jquery UI Datepicker时间控件的全部内容介绍,暂时画上了一个句号,以后再有相关文章,一定第一时间与大家分享。
相关推荐:
jquery UI Datepicker时间控件的用法(一)
jquery UI Datepicker时间控件的用法(二)
相关视频教程推荐:jQuery教程(视频)
以上就是jquery UI Datepicker时间控件的用法(三)的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
jQuery怎么判断复选框是否被选中
如何删除css样式
jQuery blur()怎么用
jQuery怎么获取元素
jQuery怎么获取表单标签值
jQuery weui是什么?
jQuery给元素设置/取消readonly和disabled属性
如何解决jQuery $.post 乱码问题
jQuery :lang()怎么用
jQuery如何判断对象是否存在
更多相关阅读请进入《jQuery》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » jquery UI Datepicker时间控件的用法(三)