《js中的时间控件WdatePicker》由会员分享，可在线阅读，更多相关《js中的时间控件WdatePicker（6页珍藏版）》请在金锄头文库上搜索。
1、js 中的时间控件 WdatePicker My97 日期控件 My97 DatePicker Ver 3.0.13.0.1 修正的问题1.修正与很多 JS 库(如 prototype,JQuery,dwr 等)的冲突问题2.解决不能“后退”的问题3.解决 IE6 中,今天和选中的日期没有以其它颜色显示的问题4.解决日期选择器被动态增加的 iframe 覆盖的问题一. 注意事项和简介1. 注意事项1. My97DatePicker 目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名, 可以改目录名2. My97DatePicker.htm 是必须文件,不可删除3. 各目录及文件的用
2、途: WdatePicker.js(导入文件,在调用的地方仅需使用该文件)config.js(主配置文件) calendar.js(日期库主文件) My97DatePicker.htm(临时页面文件)目录 lang(存放语言文件) 目录 skin(存放皮肤的相关文件)4. 在 input 里加上 class=“Wdate“就会在选择框右边加上日期图标,如果你不喜欢这个样 式,可以把 class=“Wdate“去掉,另外也可以通过修改 skin 目录下的 WdatePicker.css 文件来修改样式2. 更新和修正的内容1.优化了速度和内存占用2.增加 realValue 的格式设置3.增强日
3、期范围限制可以使用#Year# #Month# #Day# #lastDay#如:本月最后一天#Year#-#Month#-#lastDay#明年今天(注意有运算的地方,比如+1,必须用) : #Year#+1-#Month#-#Day#函数 #Ffunction比如用另一个框(id 是 test1)的值作为最小日期,则 MINDATE=“#F$(test1).value“4.当日期格式设置为 %h:%m:%s 只有时间选择了5.增加年份月份导航,增加清空按钮6.增加显示位置设置(上面 下面 自动(默认)7.增加文件包路径设置(在 wdatepicker.js 文件里,默认为空,程序会自动计算
4、路径)8.增加自定义触发事件,可以在日期框添加属性 onpicked=“function()“ 来自定义触发 事件9.增加多语言自动选择功能,系统会根据用户浏览器语言自动选择 简体 繁体 和英文修正抖屏修正在 XHTML 1.0 下不兼容的问题修正 2007-3-31 修改成 2 月份时变为 2007-2-31 的 bug修正 frame 中跳转时没销毁的 bug修正 css 路径,不必将文件包放根目录下了二. 功能介绍1. 自动切换语言(新增) 日期控件会根据用户的浏览器语言自动切换,自带 3 中语言,简体中文,繁体中文和英文相关配置文件在 lang 目录2. 支持自定义皮肤和动态切换皮肤默
5、认皮肤 default:即 skin=default 主调函数:onfocus=“new WdatePicker(this)“示例 2-1: whyGreen 皮肤:即 skin=whyGreen 主调函数:onfocus=“new WdatePicker(this,null,false,whyGreen)“注意:whyGreen要带上单引号,因为是字符串示例 2-2: 3. 自定义事件(onPicked)(新增) 事件名称:onPicked 事件触发条件:选择日期的时候示例:利用 onPicked 实现日期选择联动(选择第一个日期的时候,第二个日期选择框自动弹 出)注: hte 是后面那个选
6、择框的 id合同有效期从 到 4.日期范围限制(增强)4.1 日期范围限制(静态限制,日期格式必须与 config.js 中的 realValueShortFmt 一致)相关属性:MINDATE(最小日期) MAXDATE(最大日期)示例 4.1-1(限制日期的范围是 2006-10-8 到 2008-12-20 ): 4.2 日期范围限制(动态限制)相关属性:MINDATE(最小日期) MAXDATE(最大日期)动态变量: #Year#(今年) #Month#(本月) #Day#(今天) #lastDay#(本月最后一天)如 #Year#-#Month#-#Day#(表示今天) #Year#
7、-#Month#-#Day#+1(表示明天) #Year#+1 -#Month#-#Day#(表示明年的今天)注意:如果有运算的地方必须用括起来,如上面例子的#Day#+1,必须用 自定义函数: #F表示函数,之间是函数的内容 例子见 4.2-1示例 4.2-1(动态限制日期的范围 使用了自定义函数 前面的日期不能大于后面的日期 后面的日期的最大值是:2020-1-1):合同有效期从 到 示例 4.2-2(动态限制日期的范围 只能选择今天以前的日期(包括今天)示例 4.2-3(动态限制日期的范围 只能选择今天以后的日期(不包括今天)示例 4.2-4(动态限制日期的范围 只能选择本月的日期 1
8、号至本月最后一天)5. 根据网页大小自动选择显示位置调用形式同示例 1-1,点右下角的日期框就能看到效果示例 5-1: 67. 支持日期和时间的编辑,编辑时自动跳转到对应月份和时间不知道你是否已经注意到,当日期框里面有值时,右下角的按钮会变成确定,现在你可以尝试 对下面框中的日期和时间进行编辑 主调函数:onfocus=“new WdatePicker(this)“示例 5-1: 主调函数:onfocus=“new WdatePicker(this,%Y-%M-%D %h:%m:%s,true)“示例 5-2: 8. 支持自定义时间和日期格式(增强)8.1 年月日时分秒主调函数:onfocus
9、=“new WdatePicker(this,%Y 年%M 月%D 日 %h 时%m 分%s 秒,true)“示例 8-1: 那么像这样的文本框我们存入数据库时这么取得实际的日期值呢,别急,用这个函数 document.getElementByIdx_x(textbox2).getValue()8.2 时分秒主调函数:onfocus=“new WdatePicker(this,%h:%m:%s,true,whyGreen)“示例 8-2: 8.3 年月主调函数:onfocus=“new WdatePicker(this,%Y 年%M 月,false,whyGreen)“示例 8-2: 8.4
10、年月日时分主调函数:onfocus=“new WdatePicker(this,%Y-%M-%D %h:%m,true)“示例 8-2: 9. 增强的自动纠错功能,纠错处理可设置为 3 种模式 1.提示(默认) 2.自动纠错 3.标记您可以 在下面的日期框中填入一个不合法的日期(如:1997-02-29),再尝试离开焦点示例 9-1 另:超出日期限制范围的日期也被认为是一个不合法的日期示例 9-2 的最大日期是 2000-1-10 ,如果在下框中填入的日期 大于 2000-1-10(如 2000-1- 12)也会被认为是不合法的日期示例 9-2 10. 完美支持 FireFox您可以使用 Fi
11、reFox 浏览其来浏览此页来查看效果三. 配置说明$position = 0;$dpPath = ;var dpcfg = ;dpcfg.skin = “default“;dpcfg.dateFmt = “%Y-%M-%D“;dpcfg.realValueShortFmt = “%Y-%M-%D“;dpcfg.realValueLongFmt = “%Y-%M-%D %h:%m:%s“;dpcfg.showTime = false;dpcfg.highLineWeekDay = true;dpcfg.minDate = “1900-1-1“;dpcfg.maxDate = “2099-12-
12、30“;dpcfg.errDealMode = 0;dpcfg.errAlertMsg = “不合法的日期格式或者日期超出限定范围,需要撤销吗?“;dpcfg.aWeekStr = “日“,“一“,“二“,“三“,“四“,“五“,“六“;dpcfg.aMonStr = “一月“,“二月“,“三月“,“四月“,“五月“,“六月“,“七月“,“八月“,“九月“,“ 十月“,“十一“,“十二“; dpcfg.clearStr = “清空“;dpcfg.todayStr = “今天“;dpcfg.okStr = “确定“;dpcfg.timeStr = “时间“;.Wdateborder:#999 1
13、px solid;height:18px;background:url(datePicker.gif) no-repeat right;.WdateFmtErrfont-weight:bold;color:red;四. 如何使用1. 在使用该日期控件的文件中加入 JS 库(仅这一个文件即可,其他文件会自动引入,请勿删 除或改名), 代码如下 注:src=“datepicker/WdatePicker.js“ 请根据您的实际情况改变路径2.加上主调函数 onfocus=“new WdatePicker(el,dateFmt,showsTime,skin)“相信大家已经知道怎么用了,如果还不明白请
14、 QQ 我:9589876主调函数的使用方法和说明1.主调方法:onfocus=“new WdatePicker(el,dateFmt,showsTime,skin)“这个是 JS 库的主调函数:el: 表示返回日期的对象或对象名称,提供 2 种调用方式dateFmt: 自定义的日期格式 %Y %M %D %h %m %s 表示年月日时分秒(注意大小写) 默认是%Y-%M-%DshowsTime: 布尔型变量 true 表示带时间选择 默认为 falseskin: 皮肤的名称 本包自带 2 款皮肤 分别为 default 和 whyGreen2.属性(注意大小写,日期格式必须与 config.
15、js 中的 realValueShortFmt 一致) MINDATE: 日期最小值 格式为: 2000-1-1 或 2000/1/1 默认为:1900-1-1MAXDATE: 日期最大值 格式为: 2008-1-1 或 2008/1/1 默认为:2099-12-303 取值的方法(注意:返回值的格式在 config.js 中的 realValueShortFmt realValueLongFmt 中定义)getValue(): 这个属性用于记录日期框的日期值 通常情况下 getValue()和 日期框的 value 属性是一样的,当进行自定义日期格式的时候这 2 个值就不一样了例如: 当 格
16、式字符串: %Y 年%M 月%D 日 %h 时%m 分%s 秒 时 日期框中的 VALUE 是:2000 年 1 月 1 日 12 时 00 分 00 秒 而 getValue()值: 2000-1-1 12:00:00我想通过这个例子应该很清楚了,2000 年 1 月 1 日 12 时 00 分 00 秒对于用户来说是一个很 直观的日期,但对于计算机来说是一个不可识别的日期,在用户选择的时候我们可以使用%Y 年%M 月%D 日 %h 时%m 分%s 秒格式化日期给用户一个友好的日期格式,但是在数据存储的时 候我们不可能把 2000 年 1 月 1 日 12 时 00 分 00 秒直接存入数据库的,getValue()就是为了 解决这个问题而设计的.
