3.0.1修正的问题

http://www.waytop.net/my97/datepicker/3.0/demo/
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="Wdate"就会在选择框右边加上日期图标,如果你不喜欢这个样式,可以把class="Wdate"去掉,
    另外也可以通过修改skin目录下的WdatePicker.css文件来修改样式

2. 更新和修正的内容

二. 功能介绍

1. 自动切换语言(新增)
日期控件会根据用户的浏览器语言自动切换,自带3中语言,简体中文,繁体中文和英文
相关配置文件在 lang目录

2. 支持自定义皮肤和动态切换皮肤
默认皮肤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实现日期选择联动(选择第一个日期的时候,第二个日期选择框自动弹出)
<input class="Wdate" type="text" id="hts" onfocus="new WdatePicker(this,'%Y年%M月%D日',false)" maxdate="#F{$('hte').value}" onPicked="$('hte').onfocus()"/>
注: hte 是后面那个选择框的id
合同有效期从 到

示例 4.2-3(动态限制日期的范围 只能选择今天以后的日期(不包括今天))
<input class="Wdate" id="text213" type="text" onfocus="new WdatePicker(this)" MINDATE="#Year#-#Month#-{#Day#+1}"/>

示例 4.2-4(动态限制日期的范围 只能选择本月的日期 1号至本月最后一天)
<input class="Wdate" id="text213" type="text" onfocus="new WdatePicker(this)" MINDATE="#Year#-#Month#-1" MAXDATE="#Year#-#Month#-#lastDay#"/>

5. 根据网页大小自动选择显示位置
调用形式同示例1-1,点右下角的日期框就能看到效果

示例5-1:

6. 跨越框架显示选择框(可无限跨越框架,无论你怎么嵌套框架都不必担心了)

7. 支持日期和时间的编辑,编辑时自动跳转到对应月份和时间
不知道你是否已经注意到,当日期框里面有值时,右下角的按钮会变成确定,现在你可以尝试对下面框中的日期和时间进行编辑
主调函数:onfocus="new WdatePicker(this)"
示例5-1:

主调函数:onfocus="new WdatePicker(this,'%Y-%M-%D %h:%m:%s',true)"
示例5-2:

8. 支持自定义时间和日期格式(增强)

8.1 年月日时分秒
主调函数:onfocus="new WdatePicker(this,'%Y年%M月%D日 %h时%m分%s秒',true)"
示例8-1:
那么像这样的文本框我们存入数据库时这么取得实际的日期值呢,别急,用这个函数 document.getElementById('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 年月日时分
主调函数: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)也会被认为是不合法的日期
<input class="Wdate" type="text" onfocus="new WdatePicker(this)" MAXDATE="2000-1-10"/>
示例9-2

10. 完美支持FireFox
您可以使用FireFox浏览其来浏览此页来查看效果

三. 配置说明

/* 有四个文件可以对控件的默认情况进行配置 */
/* 分别是 WdatePicker.js config.js lang目录下的对应语言文件 和 skin目录下的WdatePicker.css */

/********************************
* 1 WdatePicker.js
********************************/
/* 日期选择框显示位置 0 auto(系统根据页面大小自动选择:默认) 1 上方显示 2 下方显示 */
$position = 0;
/* 程序包的绝对位置 注意,要用/开头 用/结尾
* 默认为空
* 为空时,程序自动创建
* 例如:程序包在http中的地址为 http://localhost/proName/My97DatePicker/
* 则 $dpPath = '/proName/My97DatePicker/';
*/
$dpPath = '';

/********************************
* 2 config.js
********************************/
var dpcfg = {};
/* 默认风格 如果你喜欢whyGreen这个样式,你可以改成whyGreen 另外你还可以自定义自己的样式 */
dpcfg.skin = "default";
/* 日期格式 %Y %M %D %h %m %s 表示年月日时分秒(注意大小写) */
dpcfg.dateFmt = "%Y-%M-%D";
/* realValue 的日期格式 */
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-30";
/* 纠错模式设置 可设置3中模式 0 - 提示 1 - 自动纠错 2 - 标记 */
dpcfg.errDealMode = 0;

/********************************
* 3 对应的语言文件 这里以 zh-cn.js 为例
********************************/
/* 纠错提示信息,仅当提示提示模式为0时有效 */
dpcfg.errAlertMsg = "不合法的日期格式或者日期超出限定范围,需要撤销吗?";
/* 语言设置 */
dpcfg.aWeekStr = ["日","一","二","三","四","五","六"];
dpcfg.aMonStr = ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一","十二"];
dpcfg.clearStr = "清空";
dpcfg.todayStr = "今天";
dpcfg.okStr = "确定";
dpcfg.timeStr = "时间";

/********************************
* 4 WdatePicker.css
********************************/
/* 日期框的样式 */
.Wdate{
border:#999 1px solid;
height:18px;
background:url(datePicker.gif) no-repeat right;
}

/* 日期框的值错误时的样式 */
.WdateFmtErr{
font-weight:bold;
color:red;
}

四. 如何使用1. 在使用该日期控件的文件中加入JS库(仅这一个文件即可,其他文件会自动引入,请勿删除或改名), 代码如下 <script language="javascript" type="text/javascript" src="datepicker/WdatePicker.js"></script>
注:src="datepicker/WdatePicker.js" 请根据您的实际情况改变路径

2.加上主调函数 onfocus="new WdatePicker('el','dateFmt','showsTime','skin')"

相信大家已经知道怎么用了,如果还不明白请QQ我:9589876

主调函数的使用方法和说明
1.主调方法:
onfocus="new WdatePicker('el','dateFmt','showsTime','skin')"
这个是JS库的主调函数:
el: 表示返回日期的对象或对象名称,提供2种调用方式
dateFmt: 自定义的日期格式 %Y %M %D %h %m %s 表示年月日时分秒(注意大小写) 默认是%Y-%M-%D
showsTime: 布尔型变量 true表示带时间选择 默认为false
skin: 皮肤的名称 本包自带2款皮肤 分别为 default 和 whyGreen
2.属性(注意大小写,日期格式必须与config.js中的realValueShortFmt一致)
MINDATE: 日期最小值 格式为: 2000-1-1 或 2000/1/1 默认为:1900-1-1
MAXDATE: 日期最大值 格式为: 2008-1-1 或 2008/1/1 默认为:2099-12-30
3 取值的方法(注意:返回值的格式在 config.js中的 realValueShortFmt realValueLongFmt 中定义)
getValue(): 这个属性用于记录日期框的日期值 通常情况下getValue()和 日期框的value 属性是一样的,当进行自定义日期格式的时候这2个值就不一样了
例如: 当 格式字符串: %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()就是为了解决这个问题而设计的.
相关的例子请参考上面的特性演示