1. 跨无限级框架显示
无论你把日期控件放在哪里, 你都不需要担心会被外层的 iframe 所遮挡进而影响客户体验 , 因为 My97 日期控件是可以跨无限级框架显示的
示例2-7 跨无限级框架演示
可无限跨越框架iframe, 无论怎么嵌套框架都不必担心了 , 即使有滚动条也不怕
2. 民国年日历和其他特殊日历
当年份格式设置为yyy 格式时 , 利用年份差量属性 yearOffset( 默认值 1911 民国元年 ), 可实现民国年日历和其他特殊日历
示例2-8 民国年演示
<input type="text" id="d28" onClick="WdatePicker({ dateFmt:'yyy/MM/dd' })"/>
注意: 年份格式设置成yyy 时 , 真正的日期将会减去一个差量 yearOffset(默认值为 :1911) ,如果是民国年使用默认值即可无需另外配置 , 如果是其他的差量 , 可以通过参数的形式配置
3. 为编程 带来方便
如果el 的值是 this, 可省略 , 即所有的 el:this 都可以不写
日期框设置为disabled 时 , 禁止更改日期 ( 不弹出选择框 )
如果没有定义onpicked 事件 , 自动触发文本框的 onchange 事件
如果没有定义oncleared 事件 , 清空时 , 自动触发 onchange 事件
4. 其他属性
设置readOnly 属性 , 可指定日期框是否只读
设置highLineWeekDay 属性 , 可指定是否高亮周末
设置isShowOthers 属性 , 可指定是否显示其他月的日期
加上class="Wdate" 就会在选择框右边出现日期图标
通过lang 属性 , 可以为每个日期控件单独配置语言 , 当然也可以通过 WdatePicker.js 配置全局的语言
语言列表和语言安装 说明详见 语言配置
示例3-1 多语言示例
繁体中文:
<input id="d311" class="Wdate" type="text" onFocus="WdatePicker({ lang:'zh-tw' })"/>
英文:
<input id="d312" class="Wdate" type="text" onFocus="WdatePicker({ lang:'en' })"/>
简体中文:
<input id="d313" class="Wdate" type="text" onFocus="WdatePicker({ lang:'zh-cn' })"/>
注意: 默认情况lang='auto', 即根据浏览器的语言自动选择语言 .
2. 自定义和动态切换皮肤 立刻转到皮肤中心
通过skin 属性 , 可以为每个日期控件单独配置皮肤 , 当然也可以通过 WdatePicker.js 配置全局的皮肤
皮肤列表和皮肤安装说明详见 皮肤配置
示例3-2 皮肤演示
默认皮肤default : skin:'default'
<input id="d321" class="Wdate" type="text" οnfοcus="WdatePicker()"/>
注意: 在WdatePicker 里配置了 skin='default', 所以此处可省略 , 同理 , 如果你把 WdatePicker 里的 skin 配置成 'whyGreen' 那么在不指定皮肤的情况下都使用 'whyGreen' 皮肤了
whyGreen皮肤 : skin:'whyGreen'
<input id="d322" class="Wdate" type="text" οnfοcus="WdatePicker({ skin:'whyGreen' })"/>
注意: 更多皮肤, 请到 皮肤中心 下载
1. 静态限制
注意: 日期格式必须与 realDateFmt 和 realTimeFmt 一致
你可以给通过配置minDate( 最小日期 ),maxDate( 最大日期 ) 为静态日期值 , 来限定日期的范围
示例4-1-1 限制日期的范围是 2006-09-10 到 2008-12-20
<input id="d411" class="Wdate" type="text" οnfοcus="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" οnfοcus="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" οnfοcus="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" οnfοcus="WdatePicker({ dateFmt:'H:mm:ss',minDate:'8:00:00',maxDate:'11:30:00' })"/>
2. 动态限制
注意: 日期格式必须与 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" οnfοcus="WdatePicker({skin:'whyGreen', maxDate:'%y-%M-%d' })"/>
示例4-2-2 使用了运算表达式 只能选择今天以后的日期 ( 不包括今天 )
<input id="d422" class="Wdate" type="text" οnfοcus="WdatePicker({ minDate:'%y-%M-#{%d+1}' })"/>
示例4-2-3 只能选择本月的日期 1 号至本月最后一天
<input id="d423" class="Wdate" type="text" οnfοcus="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" ο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' })"/>
示例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' })"/>
1. 脚本自定义限制
注意: 日期格式必须与 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.$ 相当于 document.getElementById 函数 .
那么为什么里面的 ' 使用 /' 呢 ? 那是因为 " 和 ' 都被外围的函数使用了 , 故使用转义符 / , 否则会提示 JS 语法错误 .
所以您在其他地方使用时注意把 /' 改成 " 或者 ' 来使用 .
#F{$dp.$D(/'d4312/')||/'2020-10-01/'} 表示当 d4312 为空时 , 采用 2020-10-01