今天修改bug的时候,需要修改日历控件。因为出现了这种情况:,即后面的时间可以小于前面选择的时候,为了避免出现这种现象,应该为如果先选择的是前面的时间,那后面的时间只能大于前面的时间,小于的时间都被屏蔽无法选择。如果先选择后面的时间,那前面的时间只能小于后面的时间,大于后面的时间都应该被屏蔽无法选择。
为了实现这个功能,我请教同事,查阅了一些资料,学习了JQuery日历插件my97datepicker用法,功能很强大的。
下面就我的学习经验总结一下:
1.首先下载my97datepicker所需的包,,然后将整个包复制到你的项目下面,再引用里面WdatePicker.js即可。
复制包到项目中:
在jsp页面引入js(只引入一个即可,其它的会自动引入,只需你复制整个包到项目即可引入)
实现功能代码:
JQuery日历插件My97DatePicker日期范围限制
<input class="Wdate" id="d1" οnclick="WdatePicker()" />
<input class="Wdate" id="d2" οnfοcus="WdatePicker({skin:'whyGreen',minDate:'2012-12-1',maxDate:'2012-12-20'})" />
<input type="text" id="d3" class="Wdate" οnfοcus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'2012-12-4 21:30:00',maxDate:'2012-12-4 23:59:30'})" value='2012-12-4 21:30:00'/>
<input type="text" class="Wdate" id="d4" οnfοcus="WdatePicker({dateFmt:'yyyy年M月',minDate:'2012-12',maxDate:'2013-12'})"/>
<input class="Wdate" id="d5" οnfοcus="WdatePicker({dateFmt:'H:mm:ss',minDate:'9:00:00',maxDate:'18:30:00'})" />
格式 | 说明 |
---|---|
%y | 当前年 |
%M | 当前月 |
%d | 当前日 |
%ld | 本月最后一天 |
%H | 当前时 |
%m | 当前分 |
%s | 当前秒 |
{} | 运算表达式,如:{%d+1}:表示明天 |
#F{} | {}之间是函数可写自定义JS代码 |
<input id="d421" class="Wdate" type="text" οnfοcus="WdatePicker({skin:'whyGreen',maxDate:'%y-%M-%d'})"/>
<input id="d422" class="Wdate" type="text" οnfοcus="WdatePicker({minDate:'%y-%M-{%d+1}'})"/>
<input id="d423" class="Wdate" type="text" οnfοcus="WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld'})"/>
<input id="d424" class="Wdate" type="text" οnfοcus="WdatePicker({dateFmt:'yyyy-M-d H:mm:ss',minDate:'%y-%M-%d 7:00:00',maxDate:'%y-%M-{%d+1} 21:00:00'})"/>
<input id="d425" class="Wdate" type="text" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',minDate:'%y-%M-%d {%H-20}:%m:%s',maxDate:'%y-%M-%d {%H+30}:%m:%s'})"/>
从
到
<input id="d4311" class="Wdate" type="text" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'d4312\')||\'2020-10-01\'}'})"/>
<input id="d4312" class="Wdate" type="text" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d4311\')}',maxDate:'2020-10-01'})"/>
从
到
<input type="text" class="Wdate" id="d4321" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'d4322\',{d:-3});}'})"/>
<input type="text" class="Wdate" id="d4322" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d4321\',{d:3});}'})"/>
从
到
<input type="text" class="Wdate" id="d4331" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'d4332\',{M:-3,d:-2})||$dp.$DV(\'2020-4-3\',{M:-3,d:-2})}'})"/>
<input type="text" class="Wdate" id="d4332" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d4331\',{M:3,d:2});}',maxDate:'2020-4-3'})"/>
<script>
//返回一个随机的日期
function randomDate(){
var Y = 2000 + Math.round(Math.random() * 10);
var M = 1 + Math.round(Math.random() * 11);
var D = 1 + Math.round(Math.random() * 27);
return Y+'-'+M+'-'+D;
}
</script>
<input type="text" class="Wdate" id="d434" onFocus="var date=randomDate();WdatePicker({minDate:date,maxDate:date})"/>
<input id="d441" type="text" class="Wdate" onFocus="WdatePicker({disabledDays:[6]})"/>
<input id="d442" type="text" class="Wdate" onFocus="WdatePicker({disabledDays:[0,6]})"/>
<input id="d451" type="text" class="Wdate" onFocus="WdatePicker({disabledDates:['5$']})"/>
//注意 :'5$' 表示以 5 结尾 注意 $ 的用法
<input id="d452" type="text" class="Wdate" onFocus="WdatePicker({disabledDates:['^19']})"/>
//注意:'^19' 表示以 19 开头 注意 ^ 的用法
//当然,可以使用minDate实现类似的功能 这里主要是 在演示 ^ 的用法
<input id="d453" type="text" class="Wdate" onFocus="WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld',disabledDates:['0[4-7]$','1[1-5]$','2[58]$']})"/>
<input id="d454" type="text" class="Wdate" onFocus="WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld',disabledDates:['0[4-7]$','1[1-5]$','2[58]$'],disabledDays:[1,3,6]})"/>
<input id="d2a25" type="text" class="Wdate" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',disabledDates:['%y-%M-%d {%H-1}\:..\:..','%y-%M-%d {%H+1}\:..\:..']})"/>
<script>
function randomH(){
//产生一个随机的数字 0-23
var H = Math.round(Math.random() * 23);
if(H<10) H='0'+H;
//返回 '^' + 数字
return '^'+H;
}
</script>
<input type="text" class="Wdate" id="d456" onFocus="WdatePicker({dateFmt:'HH:mm:ss',disabledDates:['#F{randomH()}']})"/>
<input id="d46" type="text" class="Wdate" onFocus="WdatePicker({opposite:true,disabledDates:['5$']})"/>
//注意 :'5$' 表示以 5 结尾 注意 $ 的用法
<input id="d471" type="text" class="Wdate" onFocus="WdatePicker({specialDays:[1,5]})"/>
<input id="d472" type="text" class="Wdate" onFocus="WdatePicker({specialDates:['....-..-01','....-..-15']})"/>
更多my97datepicker的学习可以阅读下面博客,很详细的!
http://www.penglig.com/post-71.html;
http://www.mysuc.com/test/My97DatePicker/