js中的时间控件WdatePicker
更新时间:2024-01-28 16:14:01 阅读量: 教育文库 文档下载
js中的时间控件WdatePicker
My97日期控件 My97 DatePicker Ver 3.0.1 3.0.1修正的问题
1.修正与很多JS库(如prototype,JQuery,dwr等)的冲突问题 2.解决不能“后退”的问题
3.解决IE6中,今天和选中的日期没有以其它颜色显示的问题 4.解决日期选择器被动态增加的iframe覆盖的问题
一. 注意事项和简介
1. 注意事项
1. My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名
2. My97DatePicker.htm是必须文件,不可删除 3. 各目录及文件的用途:
WdatePicker.js(导入文件,在调用的地方仅需使用该文件) config.js(主配置文件) calendar.js(日期库主文件) My97DatePicker.htm(临时页面文件) 目录lang(存放语言文件) 目录skin(存放皮肤的相关文件)
4. 在input里加上class=\就会在选择框右边加上日期图标,如果你不喜欢这个样式,可以把class=\去掉,
另外也可以通过修改skin目录下的WdatePicker.css文件来修改样式
2. 更新和修正的内容 1.优化了速度和内存占用
2.增加realValue 的格式设置 3.增强日期范围限制
可以使用#Year# #Month# #Day# #lastDay# 如:本月最后一天#Year#-#Month#-#lastDay#
明年今天(注意有运算的地方,比如+1,必须用{}) : {#Year#+1}-#Month#-#Day# 函数 #F{function}
比如用另一个框(id是test1)的值作为最小日期,则 MINDATE=\ 4.当日期格式设置为 %h:%m:%s 只有时间选择了 5.增加年份月份导航,增加清空按钮
6.增加显示位置设置(上面 下面 自动(默认))
7.增加文件包路径设置(在wdatepicker.js文件里,默认为空,程序会自动计算路径)
8.增加自定义触发事件,可以在日期框添加属性 onpicked=\来自定义触发事件
9.增加多语言自动选择功能,系统会根据用户浏览器语言自动选择 简体 繁体 和英文
修正抖屏
修正在XHTML 1.0下不兼容的问题
修正2007-3-31 修改成2月份时变为2007-2-31的bug 修正frame中跳转时没销毁的bug
修正css路径,不必将文件包放根目录下了
二. 功能介绍
1. 自动切换语言(新增)
日期控件会根据用户的浏览器语言自动切换,自带3中语言,简体中文,繁体中文和英文 相关配置文件在 lang目录
2. 支持自定义皮肤和动态切换皮肤
默认皮肤default:即skin=default 主调函数:onfocus=\ 示例2-1: whyGreen皮肤:即skin=whyGreen 主调函数:onfocus=\WdatePicker(this,null,false,'whyGreen')\ 注意:'whyGreen'要带上单引号,因为是字符串 示例2-2:
3. 自定义事件(onPicked)(新增)
事件名称:onPicked 事件触发条件:选择日期的时候
示例:利用onPicked实现日期选择联动(选择第一个日期的时候,第二个日期选择框自动弹出)
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#-#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号至本月最后一天)
5. 根据网页大小自动选择显示位置
调用形式同示例1-1,点右下角的日期框就能看到效果
示例5-1: 6
7. 支持日期和时间的编辑,编辑时自动跳转到对应月份和时间
不知道你是否已经注意到,当日期框里面有值时,右下角的按钮会变成确定,现在你可以尝试对下面框中的日期和时间进行编辑
主调函数:onfocus=\ 示例5-1:
主调函数:onfocus=\ 示例5-2:
8. 支持自定义时间和日期格式(增强) 8.1 年月日时分秒
主调函数:onfocus=\年%M月%D日 %h时%m分%s秒',true)\ 示例8-1:
那么像这样的文本框我们存入数据库时这么取得实际的日期值呢,别急,用这个函数 document.getElementByIdx_x('textbox2').getValue() 8.2 时分秒
主调函数:onfocus=\ 示例8-2: 8.3 年月
主调函数:onfocus=\年%M月',false,'whyGreen')\ 示例8-2: 8.4 年月日时分
主调函数:onfocus=\ 示例8-2:
9. 增强的自动纠错功能,纠错处理可设置为3种模式 1.提示(默认) 2.自动纠错 3.标记 您可以 在下面的日期框中填入一个不合法的日期(如:1997-02-29),再尝试离开焦点 示例9-1
另:超出日期限制范围的日期也被认为是一个不合法的日期
示例9-2的最大日期是2000-1-10 ,如果在下框中填入的日期 大于 2000-1-10(如2000-1-12)也会被认为是不合法的日期
10. 完美支持FireFox
您可以使用FireFox浏览其来浏览此页来查看效果
三. 配置说明
$position = 0;
$dpPath = '';
var dpcfg = {};
dpcfg.skin = \
dpcfg.dateFmt = \
dpcfg.realValueShortFmt = \
dpcfg.realValueLongFmt = \
dpcfg.showTime = false;
dpcfg.highLineWeekDay = true;
dpcfg.minDate = \ dpcfg.maxDate = \
dpcfg.errDealMode = 0;
dpcfg.errAlertMsg = \不合法的日期格式或者日期超出限定范围,需要撤销吗?\
dpcfg.aWeekStr = [\日\一\二\三\四\五\六\
dpcfg.aMonStr = [\一月\二月\三月\四月\五月\六月\七月\八月\九月\十月\十一\十二\dpcfg.clearStr = \清空\ dpcfg.todayStr = \今天\ dpcfg.okStr = \确定\ dpcfg.timeStr = \时间\
.Wdate{
border:#999 1px solid; height:18px;
background:url(datePicker.gif) no-repeat right; }
.WdateFmtErr{
font-weight:bold; color:red; }
四. 如何使用
1. 在使用该日期控件的文件中加入JS库(仅这一个文件即可,其他文件会自动引入,请勿删除或改名), 代码如下
正在阅读:
js中的时间控件WdatePicker01-28
我的工作作文(精选5篇)03-25
普定风光11-05
焦煤井综采工作面作业规程32101-01
英语俚语口头禅02-12
2013秋期末考试统计表06-04
机构方程模型 - 图文03-17
【最新版】华为员工岗位晋升制度05-06
丘成桐与弟子的03-17
一日卫生保健工作检查表09-17
- exercise2
- 铅锌矿详查地质设计 - 图文
- 厨余垃圾、餐厨垃圾堆肥系统设计方案
- 陈明珠开题报告
- 化工原理精选例题
- 政府形象宣传册营销案例
- 小学一至三年级语文阅读专项练习题
- 2014.民诉 期末考试 复习题
- 巅峰智业 - 做好顶层设计对建设城市的重要意义
- (三起)冀教版三年级英语上册Unit4 Lesson24练习题及答案
- 2017年实心轮胎现状及发展趋势分析(目录)
- 基于GIS的农用地定级技术研究定稿
- 2017-2022年中国医疗保健市场调查与市场前景预测报告(目录) - 图文
- 作业
- OFDM技术仿真(MATLAB代码) - 图文
- Android工程师笔试题及答案
- 生命密码联合密码
- 空间地上权若干法律问题探究
- 江苏学业水平测试《机械基础》模拟试题
- 选课走班实施方案
- 控件
- WdatePicker
- 时间
- 我国对报纸刊登有偿新闻有哪些规定?
- 2009会计学专业《管理会计》试卷
- 立式热虹吸式再沸器毕业设计
- 西安交通大学17年3月课程考试《动力测试技术》作业考核试题
- 大学生村官在新农村建设中的作用
- MSA计数型测量系统分析指导书 - 图文
- 七年级数学下册第一章单元测试题及答案
- 法律知识问题香港特别行政区政治体制中的几个主要法律
- 2011年度党政优秀调研成果通报表彰
- 投融资公司工作总结
- 2010年恩平市第六届顺恩杯中小学生篮球赛秩序册
- 语法填空中的时态训练
- 博物馆网络高清安防监控系统解决方案 - 图文
- 无菌医疗器械生产质量管理规范检查要点指南2016版
- 黄浦区2017中考英语一模试题 - 图文
- 重点中学招生考试数学试卷二
- MDI Jade软件使用手册修改 - 图文
- sqlServer简答题
- 通信工程基于matlab的(7 - 4)循环码和(7 - 4)汉明码的编程设计
- 绝望主妇第一季中英文剧本对白(1)