功能强大界面漂亮的js日期控件 My97 DatePicker Ver 2.1

功能强大界面漂亮的js日期控件
特别提醒:2.1版本是一次重要的更新,推荐原2.0用户升级,2.1版本是完全兼容2.0的,所以升级方法很简单,只要用2.1的文件覆盖原2.0对于文件即可,在调用的地方不需要做任何修改

/*****************************************************
* 2.1版更新说明(2.1是一次很重要的更新)
* 日期范围限制,可以在选择框指定MINDATE和MAXDATE属性来限制日期范围
* 增强的自动纠错功能,纠错处理可设置为3种模式 1.提示(默认) 2.自动纠错 3.标记
* 2.0版更新说明
* 支持两种调用方式
* 支持自定义皮肤和动态切换皮肤(感谢why提供whyGreen皮肤)*
* 跨越框架显示选择框
* 自动提示日期错误
* 年份,月份设置为选择模式
* 支持日期和时间的编辑,编辑时自动跳转到对应月份和时间
* 根据网页大小自动选择显示位置
* 支持时间选择
* 自定义日期时间格式
* 支持多国语言设置
* 支持周末加亮设置
* 完美支持FireFox,在FF中的效果跟IE一模一样
* ---------------------------------------------------
* 修正非WINDOWS主机下,路径错误的问题
* 修正子框架刷新后浏览器报错为不能执行已释放的Script代码的问题
* ---------------------------------------------------
* 联系My97:
* 如果您在使用过程中遇到问题,或者有更好的建议
* 欢迎您访问
* BLOG: http://blog.csdn.net/my97/ * MAIL: smallcarrot@163.com
****************************************************/

回应要求加入清空按钮的朋友:
清空按钮没有加入的有以下两个个原因,希望能得到你的谅解:
1 当某个日期值是必填字段的时候,在设计的时候会把日期框改为只读,只能让用户选择日期,加了清空按钮反而不好
2 当某个日期值是非必填字段的时候,在设计时日期框是支持用户输入的,用户将日期框的值删除也达到了清空的目的而且操作也不繁琐.

基本使用:

1. 在使用该日期控件的文件中加入JS库, 代码如下 <script language="javascript" type="text/javascript" src="datepicker/WdatePicker.js"></script>

2. 在使用该日期控件的文件加载css样式 <link href="datepicker/default/datePicker.css" rel="stylesheet" type="text/css" />

3. 在input标签里面加上(.net上是CssClass) class="Wdate"
注意:这个是对日期框的样式定义,如果你自己已经对日期框的样式定义了,此步可以不做

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

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

.Net中使用的注意事项
由于.Net中默认适用的是utf编码的所以会因为编码问题而不能使用,在引用的时候稍微有点变化
<script language="javascript" type="text/javascript" src="datepicker/WdatePicker.js"></script>
<link href="datepicker/default/datePicker.css" rel="stylesheet" type="text/css" />
改为:
<script language="javascript" type="text/javascript" src="datepicker/WdatePicker.js" charset="gb2312"></script>
<link href="datepicker/default/datePicker.css" rel="stylesheet" type="text/css" charset="gb2312"/>

繁體版用戶注意事項:
可能你們的機器上沒有安裝簡體中文,那么你需要把charset="gb2312"改為charset="GBK",另外:你需要修改默認設置里面的語言設置,把對應的簡體中文改成繁體中文

主调函数的使用方法和说明
1.主调方法:
class="Wdate" ----> 日期框的样式,你可以根据具体的项目自己更改日期框的样式,比如长度,高度颜色等
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.属性(2.1新增,注意大小写)
MINDATE: 日期最小值 格式为: 2000-1-1 或 2000/1/1 默认为:1900-1-1
MAXDATE: 日期最大值 格式为: 2008-1-1 或 2008/1/1 默认为:2099-12-30
3 改进的方法
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()就是为了解决这个问题而设计的.

相关的例子请参考下面贴出的特性演示地址

默认设置的更改和相关说明
默认设置和相关参数的更改在WdatePicker.js最上面几行,用代码说话
/* 设置 */
var dpcfg = {};
/* 默认风格如果你喜欢whyGreen这个样式,你可以改成whyGreen 另外你还可以自定义自己的样式 */
dpcfg.skin = "default";
/* 日期格式 %Y %M %D %h %m %s 表示年月日时分秒(注意大小写) */
dpcfg.dateFmt = "%Y-%M-%D";
/* 是否显示时间 */
dpcfg.showTime = false;
/* 是否高亮显示 周六 周日 */
dpcfg.highLineWeekDay = true;
/* 日期范围 */
dpcfg.minDate = "1900-1-1";
dpcfg.maxDate = "2099-12-30";
/* 纠错模式设置 可设置3中模式 0 - 提示 1 - 自动纠错 2 - 标记 */
dpcfg.errDealMode = 0;
/* 纠错提示信息,仅当提示提示模式为0时有效 */
dpcfg.errAlertMsg = "不合法的日期格式或者日期超出限定范围,需要撤销吗?";
/* 语言设置 */
dpcfg.aWeekStr = ["日","一","二","三","四","五","六"];
dpcfg.aMonStr = ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一","十二"];
dpcfg.todayStr = "今天";
dpcfg.okStr = "确定";
dpcfg.timeStr = "时间";
dpcfg.monthStr = "月份";
dpcfg.yearStr = "年份";

自定义皮肤的相关说明
皮肤是可以自定义的,
1. 皮肤名字就是皮肤文件夹名
2. 皮肤用到的图片和其他资源必须放在皮肤文件夹内
3. CSS文件的名字必须是:datepicker.css

以whyGreen皮肤为例:用代码说话

/*
* My97日期控件 My97 DatePicker Ver 2.0
* 皮肤名称:whyGreen
* 皮肤作者:why
* 作者主页:www.nbycstudio.com
*/

/* 日期选择控件 */
.Wdate{
width:140px;
border:#999 1px solid;
background:url(../datePicker.gif) no-repeat right;
}
/* 日期选择控件 日期格式错误时的CSS */
.WdateFmtErr{
font-weight:bold;
color:red;
}

/* 日期选择容器 DIV */
.WdateDiv{
width:180px;
background-color:#fff;
border:#C5E1E4 1px solid;
padding:2px;
}
.WdateDiv *{font-size:9pt;}
/****************************
* 年份月份相关
***************************/
/* 年份月份栏 DIV */
.WdateDiv #dpTitle{
height:24px;
border:#c5d9e8 1px solid;
color:#70A5AB;
background:url(bg.jpg);
margin-bottom:2px;
}
/* 年份月份输入框 INPUT */
.WdateDiv .yminput{
padding-top:2px;
text-align:center;
border:0px;
height:16px;
color:#034c50;
background:url(ymbg.jpg);
cursor:pointer;
}
/* 年份月份输入框获得焦点时的样式 INPUT */
.WdateDiv .yminputfocus{
text-align:center;
font-weight:bold;
color:#034c50;
border:#939393 1px solid;
height:16px;
}
/* 年份月份选择框 DIV */
.WdateDiv .ymsel{
position:absolute;
margin-left:24px;
top:23px;
background-color:#FFFFFF;
padding:2px;
border:#A3C6C8 1px solid;
display:none;
}
/* 年月选择框的样式 TD */
.WdateDiv .Wym{
cursor:pointer;
background-color:#fff;
color:#11777C;
}
/* 年月选择框的mouseover样式 TD */
.WdateDiv .WymOn{
cursor:pointer;
background-color:#BEEBEE;
}
/* 年月选择框无效时的样式 TD */
.WdateDiv .Winvalidym{
color:#aaa;
}
/****************************
* 星期,日期相关
***************************/
/* 日期栏表格 TABLE */
.WdateDiv #dpDayTable{
line-height:20px;
color:#13777e;
background-color:#edfbfb;
border:#BEE9F0 1px solid;
}
/* 星期栏 TR */
.WdateDiv #dpWeekTitle{
color:#13777e;
background-color:#bdebee;
}
/* 日期格的样式 TD */
.WdateDiv .Wday{
cursor:pointer;
}
/* 日期格的mouseover样式 TD */
.WdateDiv .WdayOn{
cursor:pointer;
background-color:#74d2d9 ;
}
/* 周末日期格的样式 TD */
.WdateDiv .Wwday{
cursor:pointer;
color:#ab1e1e;
}
/* 周末日期格的mouseover样式 TD */
.WdateDiv .WwdayOn{
cursor:pointer;
background-color:#74d2d9;
}
/* 今天的样式 */
.WdateDiv .Wtoday{
cursor:pointer;
color:blue;
}
/* 已选择那天的样式,即日期框中日期所对应的样式 */
.WdateDiv .Wselday{
color:red;
background-color:#B3E6EA;
}
/* 无效日期的样式,即在日期范围以外日期格的样式,不能选择的日期 */
.WdateDiv .WinvalidDay{
color:#aaa;
}
/****************************
* 时间相关
***************************/
/* 时间栏 DIV */
.WdateDiv #dpTime{

}
/* 时间文字 SPAN */
.WdateDiv #dpTime #dpTimeStr{
margin-left:1px;
color:#497F7F;
}
/* 时间输入框 INPUT */
.WdateDiv #dpTime input{
height:16px;
width:18px;
text-align:center;
color:#333;
border:#61CAD0 1px solid;
}
/* 时间 时 INPUT */
.WdateDiv #dpTime .tB{
border-right:0px;
}
/* 时间 分和间隔符 ':' INPUT */
.WdateDiv #dpTime .tE{
border-left:0;
border-right:0;
}
/* 时间 秒 INPUT */
.WdateDiv #dpTime .tm{
width:7px;
border-left:0;
border-right:0;
}
/* 时间右边的向上按钮 BUTTON */
.WdateDiv #dpTime #dpTimeUp{
height:10px;
width:13px;
border:0px;
background-image:url(up.jpg);
}
/* 时间右边的向下按钮 BUTTON */
.WdateDiv #dpTime #dpTimeDown{
height:10px;
width:13px;
border:0px;
background-image:url(down.jpg);
}
/****************************
* 其他
***************************/
/* 确定和几天按钮 INPUT */
.WdateDiv #dpOkInput{
border:#38B1B9 1px solid;
height:16px;
background-color:#CFEBEE;
color:#08575B;
}

[b]演示地址:http://www.waytop.net/my97/datepicker/2.1/demo2.1.html


下载地址:http://www.waytop.net/my97/datepicker/My97DatePicker2.1.rar[/b]