Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
最近的后台项目前端使用了jqueryui日历控件自然就使用了jqueryui的datepicker
后台数据比较好大,一般是千万级的和百万级的关联,查询会很慢,所以后加想多加些过滤条件,其中时间要设置为必选,
产品要叫日历控件做成只能做3天之内的查询,且日历控件要做成这样的要求,如果前一个日历控制选择了2013年9月1号
后面的日历控件只能选择2013年9月1号,2013年9月2号,2013年9月3号,其他的全部要不能选,本来想叫他给提示的,领导非要这么干
真是领导一句话,码工辛苦好几年啊。。。好吧还好jqueryui的日历控件提供了这个功能,很强大
首先去官网上(http://jqueryui.com/download/#!version=1.9.2)下载jqueryui包我用的是1.92版本
下载好了之后
引入:
<linkhref="jquery-ui/1.9.2/css/smoothness/jquery-ui-1.9.2.custom.min.css"rel="stylesheet"type="text/css"/> <scripttype="text/javascript"src="jquery-ui/1.9.2/js/jquery-ui-1.9.2.custom.js"></script> <scripttype="text/javascript"src="jquery-ui/1.9.2/datepicker-init.js"></script> <scripttype="text/javascript"> $(function(){ vardates=$("#startDate,#endDate"); varoption; vartargetDate; varoptionEnd; vartargetDateEnd; dates.datepicker({ showButtonPanel:false, onSelect:function(selectedDate){ if(this.id=="startDate"){ //如果是选择了开始时间(startDate)设置结束时间(endDate)的最小时间和最大时间 option="minDate";//最小时间 varselectedTime=getTimeByDateStr(selectedDate); varminTime=selectedTime; //最小时间为开第一个日历控制选择的时间 targetDate=newDate(minTime); //设置结束时间的最大时间 optionEnd="maxDate"; //因为只能做三天内的查询所以是间隔2天当前时间加上2*24*60*60*1000 targetDateEnd=newDate(minTime+2*24*60*60*1000); }else{ //如果是选择了结束时间(endDate)设置开始时间(startDate)的最小时间和最大时间 option="maxDate";//最大时间 varselectedTime=getTimeByDateStr(selectedDate); varmaxTime=selectedTime; targetDate=newDate(maxTime); //设置最小时间 optionEnd="minDate"; targetDateEnd=newDate(maxTime-2*24*60*60*1000); } dates.not(this).datepicker("option",option,targetDate); dates.not(this).datepicker("option",optionEnd,targetDateEnd); } }); //检查起始时间不能超过3天 functioncheckTimeInOneMonth(startDate,endDate){ varstartTime=getTimeByDateStr(startDate); varendTime=getTimeByDateStr(endDate); if((endTime-startTime)>2*24*60*60*1000){ returnfalse; } returntrue; } //根据日期字符串取得其时间 functiongetTimeByDateStr(dateStr){ varyear=parseInt(dateStr.substring(0,4)); varmonth=parseInt(dateStr.substring(5,7),10)-1; varday=parseInt(dateStr.substring(8,10),10); returnnewDate(year,month,day).getTime(); } </script><inputtype="text"value=""name="startDate"readonly="true"id="startDate"title="日期范围不能大于3天"/><inputtype="text"value=""name="endDate"readonly="true"id="endDate"title="日期范围不能大于3天"/>
以上这篇Jqueryuidatepicker设置日期范围,如只能隔3天【实现代码】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。