日期插件使用

WdatePicker日历控件使用方法 收藏

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" 就会在选择框右边出现日期图标

多语言和自定义皮肤

 

1.  多语言支持 

通过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" onfocus="WdatePicker()"/>

注意: 在WdatePicker 里配置了 skin='default', 所以此处可省略 , 同理 , 如果你把 WdatePicker 里的 skin 配置成 'whyGreen' 那么在不指定皮肤的情况下都使用 'whyGreen' 皮肤了

whyGreen皮肤 : skin:'whyGreen' 

<input id="d322" class="Wdate" type="text" onfocus="WdatePicker({ skin:'whyGreen' })"/>

注意: 更多皮肤, 请到 皮肤中心 下载

4.  日期范围 限制

1.  静态限制
注意: 日期格式必须与  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' })"/>

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" 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' })"/>

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