本文主要介绍JQuery日历插件My97DatePicker的日期范围限制的相关信息。有需要的朋友可以参考一下。
本文介绍了JQuery日历插件My97DatePicker限制日期范围的方法,分享给大家,供大家参考。具体情况如下
` ` input class= Wdate id= D1 onclick= WdatePicker()/
下面重点介绍日期范围限制:
1)静态限制
您可以通过将minDate(最小日期)和maxDate(最大日期)配置为静态日期值来限制日期范围。
示例1.1:
截止日期为2012年12月1日至2012年12月20日。复制代码如下:` `` ` input class= wdate id= D2 onfocus= wdate picker({ skin: why green ,mindate: 2012 . 12 . 1 ,max date: 2012 . 12 . 20 })/
示例1.2:
限行日期为2012年12月4日21: 30: 00至2012年12月4日23: 59: 30。复制代码如下:` `` ` input type= text id= D3 class= wdate onfocus= wdate picker({ skin: why green ,datefmt: yyyy-mm-ddhh: mm: ss ,Mindate: 2012年12月maxDate: 2012-12-4 23:59:30 }) value= 2012-12-4 21:30:00 /
示例1.3:
限制日期范围为2012年12月至2013年12月。复制代码如下: ````输入类型= text class= wdate id= D4 onfocus= wdatepicker({ Date fmt: yyyy年,m月,Mindate: 2012年12月,最大日期: 2013年12月 })。
示例1.4:
时限范围为9:00:00至18:30:00。复制代码如下:` `` ` input class= wdate id= D5 onfocus= wdate picker({ Date fmt: H:MM:SS ,Mindate: 9: 00: 00 ,Max Date: 18: 30: 00})/
2)动态限制
您可以通过系统给出的动态变量来限制日期范围,如%y(当前年份)、%M(当前月份)等。还可以用{}进行表达式运算,如:{%d 1}:表示明天。
正式描述/规格
%y当前年度
%M当前月份
当前第%d天
本月的最后一天%ld
%H当前时态
%m当前分数
%s当前秒
{}表达式,如{%d 1}:明天
F{} {}之间是函数可写的自定义JS代码
示例2.1:
您只能选择今天(包括今天)之前的日期。复制代码如下:input id= d421 class= wdate type= text onfocus= wdate picker({ skin: why green ,max date:% y-%m-%d})/
示例2.2:
使用运算表达式。只能选择今天(不包括今天)之后的日期。复制代码如下: ````输入id= d422 class= wdate type= text onfocus= wdate选取器({mindate:% y-%m-{%d1}})/
示例2.3:
您只能选择从本月1日到本月最后一天。复制代码如下: ````输入id= d423 class= wdate type= text onfocus= wdate选取器({Mindate:% y-%m-01 ,最大日期: % y-%m-%LD})/
示例2.4:
您只能选择今天7:00:00到明天21:00:00的日期。复制代码如下: ````输入id= d424 class= wdate type= text onfocus= wdate选取器({datefmt: yyyy-m-d h: mm: ss ,mindate:% y-%m-%d 7: 00
示例2.5:
使用运算表达式。只能选择20小时前到30小时后的日期。复制代码如下: ````输入id= d425 class= wdate type= text onclick= wdate选取器({datefmt: yyyy-mm-ddhh: mm ,mindate:% y-%m-%d {%h-20 )
3)脚本自定义限制
系统提供了两个API,$dp。$D和$dp。$DV,帮助你计算日期。此外,您可以在#F{}中填写您的自定义脚本,并根据需要设置任何日期限制。
示例3.1:
之前的日期不能晚于示例3.2:
之后的日期,并且两个日期都不能晚于2020年10月1日。从什么到什么
` ` input id= d 4311 class= Wdate type= text onFocus= WdatePicker({ maxDate: # F { $ DP。$ D( D 4312 )| | 2020-10-01 } })/
` ` input id= d 4312 class= Wdate type= text onFocus= WdatePicker({ minDate:# F { $ DP。$D(d4311)} ,maxDate:2020-10-01})/
示例3.3:
3天之前的日期不能晚于3天之后的日期。` ` input type= text class= Wdate id= d 4321 onFocus= WdatePicker({ maxDate:# F { $ DP。$D(d4322 ,{ D:-3 });}})/
` ` input type= text class= Wdate id= d 4322 onFocus= WdatePicker({ minDate:# F { $ DP。$D(d4321 ,{ D:3 });}})/
示例3.4:
之前的日期02年3月不能大于之后的日期,之前的日期不能大于2020年4月3日减去02年3月,以及2020年4月3日之后的日期。input type= text class= Wdate id= d 4331 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= d 4332 onFocus= WdatePicker({ minDate: # F { $ DP。$D(d4331 ,{M:3,D:2 });} ,maxDate:2020-4-3})/
4)无效天限制
发挥你的JS天赋,任意定义你想要的日期限制。自动转到随机生成的日期。当然,这个例子没有实际用途,只是为了演示。
脚本
//返回一个随机日期
函数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);
返回Y - M - D;
}
/脚本
input type= text class= Wdate id= d434 onFocus= var date=random date();WdatePicker({minDate:date,maxDate:date})/
示例4.1:
您可以使用此功能禁用周日至周六对应的日期。相关属性:disabledDays (0到6分别表示周日到周六)
[2008-02-01,2008-02-29]
禁用对应于星期六的日期复制代码如下:` ` ` ` input id= d441 type= text class= wdate onfocus= wdate picker({ disabled days:[6]})/
禁用周六和周日对应的日期。
复制代码如下:` `` ` input id= d442 type= text class= wdate onfocus= wdate picker({ disabled days:[0,6]})/
5)无效的日期限制
您可以使用此功能禁用指定的日期。只要熟悉正则表达式,就可以充分利用。
用法(常规匹配):
如果你熟悉正则表达式,你很容易理解下面的匹配用法。
如果不熟悉,可以参考以下常见的例子。
[2008-..-01,2008-02-29]
表示禁用2008-02-01和2008-02-29。[200[0-8]]-02-01,2008-02-29]
表示2008-所有月份-01和2008-02-29被禁用。[^2006]
表示[2000到2008]-02-01和2008-02-29被禁用。[....-..-01,%y-%M-%d]
表示禁用2006年的所有日期。此外,还可以使用%y %M %d %H %m %s等变量,其用法与动态日期限制相同。注意:不能使用%ld。
[%y-%M-{%d-1},%y-%M-{%d+1}]
表示禁用所有年份和月份的第一天和今天。[....-..-.. 10:00:00]
表示昨天和明天禁用。当然,你可以限制时间和日期。
示例5.1:
表示每天10: 00禁用(注意:需要使用:)示例5.2:
每月5日、15日、25日禁用。` ` input id= d451 type= text class= Wdate onFocus= WdatePicker({ disabled dates:[ 5 $ ]})/
//注意:‘5 $’表示以5结尾。注意$的用法
示例5.3:
禁用2000-01-01之前的所有日期``输入id= d452 type= text class= wdate onfocus=wdatepicker({disableddates:[^19]})/
//注意:‘19’表示从19开始。注意…的用法。
//当然也可以用minDate实现类似的功能。这主要是为了演示的用法
示例5.4:
与min/maxDate配合使用,可以将可选日期分成多个段。复制代码如下: ````输入id= d453 type= text class= wdate onfocus= wdate选取器({mindate:% y-%m-01 ,maxdate:% y-%m-%LD ,禁用日期:[
示例5.5:
最小/最大禁用日期禁用日期即使在非常苛刻的条件下也能满足需求。复制代码如下: ````输入id= d454 type= text class= wdate onfocus= wdate选取器({mindate:% y-%m-01 ,maxdate:% y-%m-%LD ,禁用日期:[
示例5.6:
在前一个小时和后一个小时内,始终禁用变量,如%y %M %d %H %m %s。复制代码如下: ````输入id= d2a 25 type= text class= wdate onfocus= wdate picker({ date fmt: yyyy-mm-DD HH:mm:ss ,禁用日期:[%y-%m-%d {
示例6.1:
# f {}也可以。此示例使用自定义函数随机禁用0到23之间的任意小时。
打开小时选择框,你会发现禁用了一个小时,而且每次禁用的小时都不一样。
脚本
函数randomH(){
//生成一个0-23的随机数
var H=math . round(math . random()* 23);
if(H10)H= 0 H;
//返回数字
返回^ h;
}
/脚本
input type= text class= Wdate id= d456 onFocus= WdatePicker({ date fmt: HH:mm:ss ,disabled dates:[ # F { randomH()} ]})/
6)生效日期
使用无效日期可以方便地禁用不可用日期,但是当只需要启用少数日期时,有效日期的功能就非常合适了。
关键属性:对立的默认值为false。如果为真,无效日期将成为生效日期。该属性对无效日期和特殊日期没有影响。
示例7.1:
仅每月5日、15日和25日启用。` ` input id= d46 type= text class= Wdate onFocus= WdatePicker({ opposite:true,disabledDates:[5$]})/
//注意:‘5 $’表示以5结尾。注意$的用法
7)特殊日子和特殊日期
特殊日和特殊日的用法与完全无效日和无效日完全相同,只是相反的属性对它们无效。
关键属性:
特殊日期(0到6分别代表星期日到星期六)与无效日期相同。
特殊日期的用法与无效日期相同,但对时间、分钟和秒无效。
示例7.2:
每周一和周五突出显示复制代码如下:` `` ` input id= d471 type= text class= wdate onfocus= wdate picker({特殊日子:[1,5]})/
010-59000突出显示每月的1号和15号。
复制代码如下:` ` `` input id= d472 type= text class= wdate onfocus= wdate picker({特殊日期:[.-.-01, .-.-15]})/
这就是本文的全部内容,希望对大家的学习有所帮助。