WdatePicker.js的使⽤⽅法帮助⽂档使⽤说明（时间控件）
4. ⽇期范围限制
静态限制
注意:⽇期格式必须与 realDateFmt 和 realTimeFmt ⼀致
你可以给通过配置minDate(最⼩⽇期),maxDate(最⼤⽇期)为静态⽇期值，来限定⽇期的范围
⽰例4-1-1 限制⽇期的范围是 2006-09-10到2008-12-20
<input id="d411" class="Wdate" type="text" onfocus="WdatePicker({skin:'whyGreen',minDate: '2006-09-10', maxDate: '2008-12-20' })"/>
⽰例4-1-2 限制⽇期的范围是 2008-3-8 11:30:00 到 2008-3-10 20:59:30
<input type="text" class="Wdate" id="d412" onfocus="WdatePicker({skin:'whyGreen',dateFmt: 'yyyy-MM-dd HH:mm:ss', minDate: '2008-03-08 11:30:00', maxDate: '2008-03-10 20:59:30' })" value="2008-03-09 11:00:00"/>
⽰例4-1-3 限制⽇期的范围是 2008年2⽉到 2008年10⽉
<input type="text" class="Wdate" id="d413" onfocus="WdatePicker({dateFmt: 'yyyy年M⽉', minDate: '2008-2', maxDate: '2008-10' })"/>
⽰例4-1-4 限制⽇期的范围是 8:00:00 到 11:30:00
<input type="text" class="Wdate" id="d414" onfocus="WdatePicker({dateFmt: 'H:mm:ss', minDate: '8:00:00', maxDate: '11:30:00' })"/>
动态限制
注意:⽇期格式必须与 realDateFmt 和 realTimeFmt ⼀致
你可以通过系统给出的动态变量，如%y(当前年),%M(当前⽉)等来限度⽇期范围，你还可以通过#{}进⾏表达式运算，如:#{%d+1}：表⽰明天
动态变量表
格式说明
%y 当前年
%M 当前⽉
%d 当前⽇
%ld 本⽉最后⼀天
%H 当前时
%m 当前分
%s 当前秒
#{} 运算表达式，如:#{%d+1}：表⽰明天
#F{} {}之间是函数可写⾃定义JS代码
⽰例4-2-1 只能选择今天以前的⽇期(包括今天)
<input id="d421" class="Wdate" type="text" onfocus="WdatePicker({skin:'whyGreen',maxDate: '%y-%M-%d' })"/>
⽰例4-2-2 使⽤了运算表达式只能选择今天以后的⽇期(不包括今天)
<input id="d422" class="Wdate" type="text" onfocus="WdatePicker({minDate: '%y-%M-#{%d+1}' })"/>
⽰例4-2-3 只能选择本⽉的⽇期1号⾄本⽉最后⼀天
<input id="d423" class="Wdate" type="text" onfocus="WdatePicker({minDate: '%y-%M-01', maxDate: '%y-%M-%ld' })"/>
⽰例4-2-4 只能选择今天7:00:00⾄明天21:00:00的⽇期
<input id="d424" class="Wdate" type="text" onfocus="WdatePicker({dateFmt:'yyyy-M-d H:mm:ss',minDate: '%y-%M-%d 7:00:00', maxDate: '%y-%M-# {%d+1} 21:00:00' })"/>
⽰例4-2-5 使⽤了运算表达式只能选择 20⼩时前⾄ 30⼩时后的⽇期
<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' })"/>
脚本⾃定义限制
注意:⽇期格式必须与 realDateFmt 和 realTimeFmt ⼀致
系统提供了$dp.$D和$dp.$DV这两个API来辅助你进⾏⽇期运算，此外你还可以通过在 #F{} 中填⼊你⾃定义的脚本，做任何你想做的⽇期限制
⽰例4-3-1 前⾯的⽇期不能⼤于后⾯的⽇期且两个⽇期都不能⼤于 2020-10-01
合同有效期从到
<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' })"/>
注意:
两个⽇期的⽇期格式必须相同
$dp.$ 相当于 ElementByIdx_x 函数.
那么为什么⾥⾯的 ' 使⽤ \' 呢? 那是因为 " 和 ' 都被外围的函数使⽤了，故使⽤转义符 \ ，否则会提⽰JS语法错误.
所以您在其他地⽅使⽤时注意把 \' 改成 " 或者 ' 来使⽤.
#F{$dp.$D(\'d4312\')||\'2020-10-01\'} 表⽰当 d4312 为空时, 采⽤ 2020-10-01 的值作为最⼤值
⽰例4-3-2 前⾯的⽇期+3天不能⼤于后⾯的⽇期
⽇期从到
<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});}' })"/>
使⽤ $dp.$D 函数可以将⽇期框中的值，加上定义的⽇期差量:
两个参数: id={字符类型}需要处理的⽂本框的id值 , obj={对象类型}⽇期差量
⽇期差量⽤法:
属性y,M,d,H,m,s分别代表年⽉⽇时分秒
如
为空时，表⽰直接取值，不做差量(⽰例4-3-1中的参数就是空的)
{M:5,d:7} 表⽰五个⽉零7天
{y:1,d:-3} 表⽰ 1年少3天
{d:1,H:1} 表⽰⼀天多1⼩时
⽰例4-3-3 前⾯的⽇期+3⽉零2天不能⼤于后⾯的⽇期且前⾯⽇期都不能⼤于 2020-4-3减去3⽉零2天后⾯⽇期不能⼤于 2020-4-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" onFo
cus="WdatePicker({minDate: '#F{$dp.$D(\'d4331\',{M:3,d:2});} ',maxDate: '2020-4-3 '})"/>
注意:
#F{$dp.$D(\'d4332\',{M:-3,d:-2}) || $dp.$DV(\'2020-4-3\',{M:-3,d:-2})}
表⽰当 d4332 为空时, 采⽤ $dp.$DV(\'2020-4-3\',{M:-3,d:-2})} 的值作为最⼤值
使⽤ $dp.$DV 函数可以将显式传⼊的值，加上定义的⽇期差量:
两个参数: value={字符类型}需要处理的值 , obj={对象类型}⽇期差量
⽤法同上⾯的 $dp.$D 类似，如 $dp.$DV(\'2020-4-3\',{M:-3,d:-2}) 表⽰ 2020-4-3减去3⽉零2天
⽰例4-3-4 发挥你的JS才能，定义任何你想要的⽇期限制
⾃动转到随机⽣成的⼀天，当然，此⽰例没有实际的⽤途，只是为演⽰⽬的
<script>
//返回⼀个随机的⽇期
function randomDate(){
var Y = 2000 + und(Math.random() * 10);
var M = 1 + und(Math.random() * 11);
var D = 1 + und(Math.random() * 27);
return Y+'-'+M+'-'+D;
}
</script>
<input type="text" class="Wdate" id="d434" onFocus="var date=randomDate();WdatePicker({minDate:date,maxDate:date}) "/>
⽆效天
可以使⽤此功能禁⽤周⽇⾄周六所对应的⽇期，相关属性:disabledDays (0⾄6 分别代表周⽇⾄周六)
⽰例4-4-1 禁⽤周六所对应的⽇期
<input id="d441" type="text" class="Wdate" onFocus="WdatePicker({disabledDays: [6] })"/>
⽰例4-4-2 通过position属性,⾃定义弹出位置
<input id="d442" type="text" class="Wdate" onFocus="WdatePicker({disabledDays: [0,6] })"/>
⽆效⽇期
注意:⽇期格式必须与 realDateFmt 和 realTimeFmt ⼀致
可以使⽤此功能禁⽤，所指定的⼀个或多个⽇期，只要你熟悉正则表达式，你可以尽情发挥
⽤法(正则匹配):
如果你熟悉正则表达式，会很容易理解下⾯的匹配⽤法
如果不熟悉，可以参考下⾯的常⽤⽰例
['2008-02-01','2008-02-29'] 表⽰禁⽤ 2008-02-01 和 2008-02-29
['2008-..-01','2008-02-29'] 表⽰禁⽤ 2008-所有⽉份-01 和 2008-02-29
['200[0-8]]-02-01','2008-02-29'] 表⽰禁⽤ [2000⾄2008]-02-01 和 2008-02-29
['^2006'] 表⽰禁⽤ 2006年的所有⽇期
此外，您还可以使⽤ %y %M %d %H %m %s 等变量, ⽤法同动态⽇期限制注意:%ld不能使⽤
['....-..-01','%y-%M-%d'] 表⽰禁⽤所有年份和所有⽉份的第⼀天和今天
['%y-%M-#{%d-1}','%y-%M-#{%d+1}'] 表⽰禁⽤昨天和明天
当然，除了可以限制⽇期以外，您还可以限制时间
['....-..-.. 10\:00\:00'] 表⽰禁⽤每天10点 (注意 : 需要使⽤ \: )
不再多举例了，尽情发挥你的正则才能吧!
⽰例4-5-1 禁⽤每个⽉份的 5⽇ 15⽇ 25⽇
<input id="d451" type="text" class="Wdate" onFocus="WdatePicker({disabledDates: ['5$'] })"/>
注意 : '5$' 表⽰以 5 结尾注意 $ 的⽤法
⽰例4-5-2 禁⽤所有早于2000-01-01的⽇期
<input id="d452" type="text" class="Wdate" onFocus="WdatePicker({disabledDates: ['^19'] })"/>
注意: '^19' 表⽰以 19 开头注意 ^ 的⽤法
当然，可以使⽤minDate实现类似的功能这⾥主要是在演⽰ ^ 的⽤法
⽰例4-5-3 配合min/maxDate使⽤，可以把可选择的⽇期分隔成多段
本⽰例本⽉可⽤⽇期分隔成五段分别是: 1-3 8-10 16-24 26,27 29-⽉末
<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]$'] })"/>
⽰例4-5-4 min/maxDate disabledDays disabledDates 配合使⽤即使在要求⾮常苛刻的情况下也能满⾜需求
<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] })"/>
⽰例4-5-5 禁⽤前⼀个⼩时和后⼀个⼩时内所有时间使⽤ %y %M %d %H %m %s 等变量
⿏标点击⼩时输⼊框时，你会发现当然时间对应的前⼀个⼩时和后⼀个⼩时是灰⾊的
<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}\:..\:..'] })"/>
注意: %y %M %d等详见动态变量表
⽰例4-5-6 #F{}也是可以使⽤的
本⽰例利⽤⾃定义函数随机禁⽤0-23中的任何⼀个⼩时
打开⼩时选择框，你会发现有⼀个⼩时被禁⽤的,⽽且每次禁⽤的⼩时都不同
<script>
function randomH(){
//产⽣⼀个随机的数字 0-23js当前日期加一天
var H = und(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()}'] })"/>
有效天与有效⽇期
使⽤⽆效天和⽆效⽇期可以很⽅便的禁⽤不可⽤的⽇期，但是在只需要启⽤少部分⽇期的情况下，有效天和有效⽇期的功能就⾮常适合了.
关键属性: opposite 默认为false, 为true时,⽆效天和⽆效⽇期变成有效天和有效⽇期
⽰例4-6 只启⽤每个⽉份的 5⽇ 15⽇ 25⽇
<input id="d46" type="text" class="Wdate" onFocus="WdatePicker({opposite: true ,disabledDates: ['5$'] })"/>
注意 : '5$' 表⽰以 5 结尾注意 $ 的⽤法
特殊天和特殊⽇期
特殊天和特殊⽇期的⽤法跟完全⽆效天和⽆效⽇期完全相同，但是opposite属性对其⽆效
关键属性:
specialDays (0⾄6 分别代表周⽇⾄周六) ⽤法同⽆效天
specialDates ⽤法同⽆效⽇期，但是对时分秒⽆效
⽰例4-7-1 ⾼亮每周周⼀周五
<input id="d471" type="text" class="Wdate" onFocus="WdatePicker({specialDays: [1,5] })"/>
⽰例4-7-2 ⾼亮每⽉ 1号 15号
<input id="d472" type="text" class="Wdate" onFocus="WdatePicker({specialDates: ['....-..-01','....-..-15'] })"/>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论