My97 DatePicker 主流日历空间基本使用方法

基本使用:

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.加上主调函数 οnfοcus="new WdatePicker('el','dateFmt','showsTime','skin')"

.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" ----> 日期框的样式,你可以根据具体的项目自己更改日期框的样式,比如长度,高度颜色等
οnfοcus="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皮肤为例:用代码说话

/* 日期选择控件 */
.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;
}