jsp⽇期插件My97DatePicker强⼤的⽇期控件使⽤⽅便简单
（转）
本⽂属转载（希望对编程爱好者有所帮助）详情请访问官⽅⽹站
⼀. 简介
1. 简介
⽬前的版本是:4.7
2. 注意事项
My97DatePicker⽬录是⼀个整体，不可破坏⾥⾯的⽬录结构，也不可对⾥⾯的⽂件改名，可以改⽬录名
My97DatePicker.htm是必须⽂件，不可删除
各⽬录及⽂件的⽤途:
WdatePicker.js 配置⽂件，在调⽤的地⽅仅需使⽤该⽂件，可多个共存，以xx_WdatePicker.js⽅式命名
config.js 语⾔和⽪肤配置⽂件,⽆需引⼊
calendar.js ⽇期库主⽂件,⽆需引⼊
My97DatePicker.htm 临时页⾯⽂件，不可删除
⽬录lang 存放语⾔⽂件，你可以根据需要清理或添加语⾔⽂件
⽬录skin 存放⽪肤的相关⽂件，你可以根据需要清理或添加⽪肤⽂件包
当WdatePicker.js⾥的属性:$wdate=true时，在input⾥加上class="Wdate"就会在选择框右边出现⽇期图标，如果您不喜欢这个样式，可以把class="Wdate"去掉，另外也可以通过修改skin⽬录下的WdatePicker.css⽂件来修改样式
3. ⽀持的浏览器
IE 6.0+ , Firefox 2.0+ , Chrome, Opera 9.5+ , Safari 3.0+
⼆. 功能及⽰例
1. 常规功能
1. ⽀持多种调⽤模式
除了⽀持常规在input单击或获得焦点调⽤外，还⽀持使⽤其他的元素如:<img><div>等触发WdatePicker函数来调⽤弹出⽇期框⽰例1-1-1 常规调⽤
⽰例1-1-2 图标触发
<img onclick="WdatePicker({el:'d12'})" src="../skin/datePicker.gif" width="16" height="22" align="absmiddle">
注意：只需要传⼊控件的id即可
2. 下拉，输⼊，导航选择⽇期
年⽉时分秒输⼊框都具备以下三种特性
1. 通过导航图标选择
2. 直接使⽤键盘输⼊数字
3. 直接从弹出的下拉框中选择
另：年份输⼊框有智能提⽰功能，当⽤户连续点击同⼀个导航按钮5次时，会⾃动弹出年份下拉框
3. ⽀持周显⽰
可以通过配置isShowWeek属性决定是否限制周，并且在返回⽇期的时候还可以通过⾃带的⾃定义事件和API函数返回选择的周
⽰例1-2-1 周显⽰简单应⽤
⽰例1-2-2 利⽤onpicked事件把周赋值给另外的⽂本框
您选择了第格式)周, 另外您可以使⽤WW格式周
{$dp.$('d122_1').value=$P('W','W');$dp.$('d122_2').value=$P('W','WW');}})"/>
onpicked ⽤法详见
$P ⽤法详见
4. 只读开关,⾼亮周末功能
设置readOnly属性 true 或 false 可指定⽇期框是否只读
设置highLineWeekDay属性 ture 或 false 可指定是否⾼亮周末
5. 操作按钮⾃定义
清空按钮和今天按钮，可以根据需要进⾏⾃定义，它们分别对应 isShowClear 和 isShowToday 默认值都是true
⽰例1-5 禁⽤清空功能
最好把readOnly置为true，否则即使隐藏了清空按钮,⽤户依然可以在输⼊框⾥把值delete掉
6. ⾃动选择显⽰位置
当控件处在页⾯边界时，它会⾃动选择显⽰的位置，所以没有必要担⼼弹出框会被页⾯边界遮住的问题了.
7. ⾃定义弹出位置
当控件处在页⾯边界时，它会⾃动选择显⽰的位置.此外你还可以使⽤position参数对弹出位置做调整.
⽰例1-6 通过position属性,⾃定义弹出位置
使⽤positon属性指定，弹出⽇期的坐标为{left:100,top:50}
<input class="Wdate" type="text" id="d16" onfocus="WdatePicker({position:{left:100,top:50}})"/>
position属性的详细⽤法详见
8. ⾃定义星期的第⼀天(4.6新增)
各个国家的习惯不同，有些喜欢以星期⽇作为第⼀天，有些以星期⼀作为第⼀天.
相关属性:firstDayOfWeek: 可设置 0 - 6 的任意⼀个数字,0：星期⽇ 1：星期⼀以此类推
⽰例1-7 以星期⼀作为第⼀天
idea修改jar包依赖2. 特⾊功能
1. 平⾯显⽰
⽇期控件⽀持平⾯显⽰功能，只要设置⼀下eCont属性就可以把它当作⽇历来使⽤了,⽆需触发条件，直接显⽰在页⾯上
⽰例2-1 平⾯显⽰演⽰
<div id="div1"></div>
<script>
WdatePicker({eCont:'div1',onpicked:function(dp){alert('你选择的⽇期是:'+DateStr())}})
</script>
$DateStr ⽤法详见
2. ⽀持多种容器
除了可以将值返回给input以外，还可以通过配置el属性将值返回给其他的元素(如:textarea,div,span)等，带有innerHTML属性的HTML元素
⽰例2-2 将⽇期返回到<span>中
2008-01-01
代码:
<span id="demospan">2008-01-01</span>
<img onClick="WdatePicker({el:'demospan'})" src="../../My97DatePicker/skin/datePicker.gif" width="16" height="22"
align="absmiddle" />
3. 起始⽇期功能
注意:⽇期格式必须与 realDateFmt 和 realTimeFmt ⼀致
有时在项⽬中需要选择⽣⽇之类的⽇期,⽽默认点开始⽇期都是当前⽇期，导致年份选择⾮常⿇烦，你可以通过起始⽇期功能加上配置alwaysUseStartDate属性轻松解决此类问题
⽰例2-3-1 起始⽇期简单应⽤
默认的起始⽇期为 1980-05-01
company词根词缀当⽇期框为空值时，将使⽤ 1980-05-01 做为起始⽇期
⽰例2-3-2 alwaysUseStartDate属性应⽤
默认的起始⽇期为 1980-05-01
当⽇期框⽆论是何值，始终使⽤ 1980-05-01 做为起始⽇期
⽰例2-3-3 使⽤内置参数
除了使⽤静态的⽇期值以外，还可以使⽤动态参数(如:%y,%M分别表⽰当前年和⽉)
下例演⽰，年⽉⽇使⽤当年当⽉的1⽇，时分秒使⽤00:00:00作为起始时间
HH:mm:ss',alwaysUseStartDate:true})"/>
4. ⾃定义格式
yMdHmswW分别代表年⽉⽇时分秒星期周，你可以任意组合这些元素来⾃定义你个性化的⽇期格式.
⽇期格式表
安卓手机终端terminal格式说明
y将年份表⽰为最多两位数字。如果年份多于两位数，则结果中仅显⽰两位低位数。
yy同上，如果⼩于两位数，前⾯补零。
yyy将年份表⽰为三位数字。如果少于三位数，前⾯补零。
yyyy将年份表⽰为四位数字。如果少于四位数，前⾯补零。
M将⽉份表⽰为从 1 ⾄ 12 的数字
MM同上，如果⼩于两位数，前⾯补零。
MMM返回⽉份的缩写⼀⽉⾄⼗⼆⽉ (英⽂状态下 Jan to Dec) 。
MMMM返回⽉份的全称⼀⽉⾄⼗⼆⽉ (英⽂状态下 January to December) 。
d将⽉中⽇期表⽰为从 1 ⾄ 31 的数字。
dd同上，如果⼩于两位数，前⾯补零。
H将⼩时表⽰为从 0 ⾄ 23 的数字。
HH同上，如果⼩于两位数，前⾯补零。
m将分钟表⽰为从 0 ⾄ 59 的数字。
mm同上，如果⼩于两位数，前⾯补零。
s将秒表⽰为从 0 ⾄ 59 的数字。
ss同上，如果⼩于两位数，前⾯补零。
w返回星期对应的数字 0 (星期天) - 6 (星期六) 。
D返回星期的缩写⼀⾄六 (英⽂状态下 Sun to Sat) 。
DD返回星期的全称星期⼀⾄星期六 (英⽂状态下 Sunday to Saturday) 。
W返回周对应的数字 (1 - 53) 。
WW同上，如果⼩于两位数，前⾯补零 (01 - 53) 。
⽰例
格式字符串值yyyy-MM-dd HH:mm:ss2008-03-12 19:20:00
yy年M⽉08年3⽉
yyyyMMdd20080312
今天是:yyyy年M年d HH时mm分今天是:2008年3⽉12⽇ 19时20分
H:m:s19:20:0
y年8年
MMMM d, yyyy三⽉ 12, 2008
⽰例 2-4-1: 年⽉⽇时分秒
年MM⽉dd⽇ HH时mm分ss秒'})" class="Wdate"
/>
注意：点两次才能选择⽇期的原因，详见属性
⽰例 2-4-2 时分秒
为什么用hbase
注意：这⾥提前使⽤了⽪肤(skin)属性，所以你会看到⼀个不同的⽪肤,⽪肤属性详见
⽰例 2-4-3 年⽉
年MM⽉'})" class="Wdate"/>⽰例 2-4-4 取得系统可识别的⽇期值(重要)
类似于 1999年7⽉5⽇这样的⽇期是不能够被系统识别的，他必须转换为能够识别的类型如 1999-07-05
真实的⽇期值是
年M⽉d⽇',vel:'d244_2'})"/> <input id="d244_2" type="text" />
注意：在实际应⽤中,⼀般会把vel指定为⼀个hidden控件，这⾥是为了把真实值展⽰出来，所以使⽤⽂本框
关键属性: vel 指定⼀个控件或控件的ID，必须具有value属性(如input),⽤于存储真实值(也就是realDateFmt和realTimeFmt格式化后的值)
⽰例 2-4-5 星期, ⽉⽇, 年(4.6新增)
5. 双⽉⽇历功能(4.6新增)
可以同时弹出两个⽉的⽇历
⽰例2-5 双⽉⽇历功能
注意：双⽉⽇历⼀般只⽤于包含年⽉⽇三个元素的场景，另外设置该属性时,autoPickDate⾃动设置为true
6. ⾃动纠错功能
纠错处理可设置为3种模式：提⽰(默认) ⾃动纠错标记，当⽇期框中的值不符合格式时，系统会尝试⾃动修复，如果修复失败会根据您设置的纠错处理模式进⾏处理，错误判断功能⾮常智能它可以保证⽤户输⼊的值是⼀个合法的值
⽰例2-6-1 不合法的⽇期演⽰
请在下⾯的⽇期框中填⼊⼀个不合法的⽇期(如:1997-02-29)，再尝试离开焦点
使⽤默认容错模式提⽰模式 errDealMode = 0 在输⼊错误⽇期时，会先提⽰
注意:1997年不是闰年哦
⽰例2-6-2 超出⽇期限制范围的⽇期也被认为是⼀个不合法的⽇期
最⼤⽇期是2000-01-10 ，如果在下框中填⼊的⽇期⼤于 2000-01-10(如2000-01-12)也会被认为是不合法的⽇期
⾃动纠错模式 errDealMode = 1 在输⼊错误⽇期时,⾃动恢复前⼀次正确的值jsp中文全称
⽰例2-6-3 使⽤⽆效天和⽆效⽇期功能限制的⽇期也被认为是⼀个不合法的⽇期
如何解码json字符串如:
2008-02-20 ⽆效⽇期限制
2008-02-02 2008-02-09 2008-02-16 2008-02-23 ⽆效天限制
都是⽆效⽇期
您可以尝试在下框中输⼊这些⽇期，并离开焦点
标记模式 errDealMode = 2 在输⼊错误⽇期时，不做提⽰和更改，只是做⼀个标记，但此时⽇期框不会马上隐藏
注意：标记类:WdateFmtErr是在skin⽬录下WdatePicker.css中定义的
7. 跨⽆限级框架显⽰

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。