【免费】超级好的js日历控件资源-CSDN文库

共33个文件

gif：9个

jpg：8个

htm：7个

需积分: 0 128 浏览量 2008-11-14 12:46:12 上传评论收藏 104KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

My97DatePicker3.0.1相当好.rar （33个子文件）

My97DatePicker3.0.1相当好

使用说明(必读)

demo_iframe.htm 1KB

left.htm 2KB

main.htm 20KB

使用说明(必读).htm 472B

demo_iframe2.htm 478B

My97DatePicker

test.htm 202B

calendar.js 29KB

My97DatePicker.htm 1KB

WdatePicker.js 8KB

skin

whyGreen

left.gif 73B

right.gif 73B

other

interface.jpg 83KB

bg2.jpg 378B

datepicker.css 3KB

navRight.gif 80B

navLeft.gif 80B

down.jpg 445B

bg.jpg 307B

ymbg.jpg 302B

up.jpg 448B

default

left.gif 65B

right.gif 65B

datepicker.css 3KB

navRight.gif 71B

navLeft.gif 71B

down.jpg 381B

up.jpg 379B

datePicker.gif 1KB

WdatePicker.css 153B

config.js 300B

lang

zh-tw.js 579B

zh-cn.js 579B

en.js 345B

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>My97 DatePicker 3.0 演示 - 主要文件</title> <script language="javascript" type="text/javascript" src="../My97DatePicker/WdatePicker.js"></script> <style> *{font-size:9pt;line-height:20px} .title{font-size:16px;color:#0000FF;font-weight:bold} .con{margin-left:15px;} .STYLE1 {color: #FF0000} .STYLE2 {color: #0000FF} .STYLE3 {color: #009900} </style> </head> <body> My97日期控件 My97 DatePicker Ver 3.0.1 3.0.1修正的问题<a name="m3.0.1" id="m3.0.1"></a> 1.修正与很多JS库(如prototype,JQuery,dwr等)的冲突问题 2.解决不能“后退”的问题 3.解决IE6中,今天和选中的日期没有以其它颜色显示的问题 4.解决日期选择器被动态增加的iframe覆盖的问题 <a name="m1" id="m1"></a> 一. 注意事项和简介 <a name="m11" id="m11"></a> 1. 注意事项  1. My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名  2. My97DatePicker.htm是必须文件,不可删除  3. 各目录及文件的用途:     WdatePicker.js(导入文件,在调用的地方仅需使用该文件)     config.js(主配置文件) calendar.js(日期库主文件) My97DatePicker.htm(临时页面文件)     目录lang(存放语言文件) 目录skin(存放皮肤的相关文件)  4. 在input里加上class="Wdate"就会在选择框右边加上日期图标,如果你不喜欢这个样式,可以把class="Wdate"去掉,     另外也可以通过修改skin目录下的WdatePicker.css文件来修改样式   <a name="m12" id="m12"></a> 2. 更新和修正的内容 1.优化了速度和内存占用 2.增加realValue 的格式设置 3.增强日期范围限制 可以使用#Year# #Month# #Day# #lastDay# 如:本月最后一天#Year#-#Month#-#lastDay# 明年今天(注意有运算的地方,比如+1,必须用{}) : {#Year#+1}-#Month#-#Day# 函数 #F{function} 比如用另一个框(id是test1)的值作为最小日期,则 MINDATE="#F{$('test1').value}" 4.当日期格式设置为 %h:%m:%s 只有时间选择了 5.增加年份月份导航,增加清空按钮 6.增加显示位置设置(上面下面自动(默认)) 7.增加文件包路径设置(在wdatepicker.js文件里,默认为空,程序会自动计算路径) 8.增加自定义触发事件,可以在日期框添加属性 onpicked="function(){}" 来自定义触发事件 9.增加多语言自动选择功能,系统会根据用户浏览器语言自动选择简体繁体和英文 修正抖屏 修正在XHTML 1.0下不兼容的问题 修正2007-3-31 修改成2月份时变为2007-2-31的bug 修正frame中跳转时没销毁的bug 修正css路径,不必将文件包放根目录下了 <a name="m2" id="m2"></a> 二. 功能介绍 <a name="m21" id="m21"></a> 1. 自动切换语言(新增) 日期控件会根据用户的浏览器语言自动切换,自带3中语言,简体中文,繁体中文和英文 相关配置文件在 lang目录   <a name="m22" id="m22"></a> 2. 支持自定义皮肤和动态切换皮肤 默认皮肤default:即skin=default 主调函数:onfocus="new WdatePicker(this)" 示例2-1: <input class="Wdate" type="text" onfocus="new WdatePicker(this)"/> whyGreen皮肤:即skin=whyGreen 主调函数:onfocus="new WdatePicker(this,null,false,'whyGreen')" 注意:'whyGreen'要带上单引号,因为是字符串 示例2-2: <input class="Wdate" type="text" onfocus="new WdatePicker(this,null,false,'whyGreen')"/>   <a name="m23" id="m23"></a> 3. 自定义事件(onPicked)(新增) 事件名称:onPicked 事件触发条件:选择日期的时候 示例:利用onPicked实现日期选择联动(选择第一个日期的时候,第二个日期选择框自动弹出) <input class="Wdate" type="text" id="hts" onfocus="new WdatePicker(this,'%Y年%M月%D日',false)" maxdate="#F{$('hte').value}" onPicked="$('hte').onfocus()"/> 注: hte 是后面那个选择框的id 合同有效期从 <input class="Wdate" type="text" id="hts" onfocus="new WdatePicker(this,'%Y年%M月%D日',false)" maxdate="#F{$('hte').value}" onpicked="$('hte').onfocus()"/> 到 <input class="Wdate" type="text" id="hte" onfocus="new WdatePicker(this,'%Y年%M月%D日',false)" mindate="#F{$('hts').value}" maxdate="2020-1-1"/>   <a name="m24" id="m24"></a> 4.日期范围限制(增强) <a name="m241" id="m241"></a> 4.1 日期范围限制(静态限制,日期格式必须与config.js中的realValueShortFmt一致) 相关属性:MINDATE(最小日期) MAXDATE(最大日期) <input class="Wdate" type="text" onfocus="new WdatePicker(this)" MINDATE="2006-10-8" MAXDATE="2008-12-20"/> 示例 4.1-1(限制日期的范围是 2006-10-8到2008-12-20 ): <input class="Wdate" type="text" onfocus="new WdatePicker(this)" mindate="2006-10-8" maxdate="2008-12-20"/> <a name="m242" id="m242"></a> 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): <input class="Wdate" id="htStart" type="text" onfocus="new WdatePicker(this,'%Y年%M月%D日',false)" MAXDATE="#F{$('htEnd').value}"/> <input class="Wdate" id="htEnd" type="text" onfocus="new WdatePicker(this,'%Y年%M月%D日',false)" MINDATE="#F{$('htStart').value}" MAXDATE="2020-1-1"/> 合同有效期从 <input class="Wdate" type="text" id="htStart" onfocus="new WdatePicker(this,'%Y年%M月%D日',false)" maxdate="#F{$('htEnd').value}"/> 到 <input class="Wdate" type="text" id="htEnd" onfocus="new WdatePicker(this,'%Y年%M月%D日',false)" mindate="#F{$('htStart').value}" maxdate="2020-1-1"/> 示例 4.2-2(动态限制日期的范围只能选择今天<font colo

评论收藏

内容反馈