My97 DatePicker 2.1 演示

My97日期控件 My97 DatePicker Ver 2.1 特性展示

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()就是为了解决这个问题而设计的.

2.1新增功能(如果您没有用过2.0版本请务必先看2.0的相关说明,单击此处查看2.0特性)

2.1.1 日期范围限制(静态限制)
相关属性:MINDATE(最小日期) MAXDATE(最大日期)
<input type="text" class="Wdate" onfocus="new WdatePicker(this)" MINDATE="2006-10-8" MAXDATE="2008-11-20"/>
注意:在.NET中,可以使用TextBox代替input,class="Wdate"改为CssClass="Wdate"其他类似,下面的例子在.NET中的调用也是类似的,不再做说明了
示例 2.1-1(限制日期的范围是 2006-10-8到2008-11-20 ):

2.1.2 日期范围限制(动态限制)
相关属性:MINDATE(最小日期) MAXDATE(最大日期)
动态变量: 使用$开头后面接日期框的id
特殊变量: #Today 表示今天
示例 2.1-1(动态限制日期的范围前面的日期不能大于后面的日期后面的日期的最大值是:2020-1-1):
<input id="htStart" type="text" class="Wdate" onfocus="new WdatePicker(this,'%Y年%M月%D日',false)" MAXDATE="$htEnd"/>
<input id="htEnd" type="text" class="Wdate" onfocus="new WdatePicker(this,'%Y年%M月%D日',false)" MINDATE="$htStart" MAXDATE="2020-1-1"/>
合同有效期从到

示例 2.1-2(动态限制日期的范围只能选择今天以前的日期)
<input id="text212" type="text" class="Wdate" onfocus="new WdatePicker(this)" MAXDATE="#Today"/>

示例 2.1-3(动态限制日期的范围只能选择今天以后的日期)
<input id="text213" type="text" class="Wdate" onfocus="new WdatePicker(this)" MINDATE="#Today"/>

2.1.3 增强的自动纠错功能
纠错处理可设置为3种模式 1.提示(默认) 2.自动纠错 3.标记
注:纠错处理模式,可通过修改,具体操作方法请单击此处查看
合法日期的定义: 符合格式而且在限定范围之内的日期
1. 当遇到合法的日期时不做任何处理
示例:略
2. 当遇到合法日期但是格式与设定的格式不匹配时,如用户设定的格式是 %Y年%M月%D日而用户输入 2000-1-1 则自动转换成 2000年1月1日
示例 2.1-4(你可以参数在下框中直接输入 2000-1-1 , 2005/1/1 , 2008-1/1 然后看看效果吧
<input id="text213" type="text" class="Wdate" onfocus="new WdatePicker(this,'%Y年%M月%D日',false)"/>

3. 当遇到不合法日期时,根据设定的纠错处理模式,做相应的处理,默认的纠错处理模式是提示 ,他将弹出一个对话框提示用户并让用户选择如何处理
示例 2.1-5 你可以参数在下框中直接输入 200a-b-11(错误的日期) 2001/2/29(非闰年) 1999-1-1(限定范围之外的日期) 然后看看效果吧
<input id="text2" type="text" class="Wdate" onfocus="new WdatePicker(this)" MINDATE="2000-1-1" MAXDATE="2020-1-1"/>

2.1.4 改进的取值方式
如果你的日期格式定义是 %Y-%M-%D %h:%m:%s 那么取值的时候很简单,因为计算机是直接认识这种格式的日期的
但是,有时为了项目的需要我们会将日期格式定义成 %Y年%M月%D日 %h时%m分%s秒那么计算机改如何取值呢? 我们这里提供了一个getValue方法
<input type="text" class="Wdate" id="text3" style="width:240px" onFocus="new WdatePicker(this,'%Y年%M月%D日 %h时%m分%s秒',true)"/>
点此取值:document.getElementById('text3').getValue()

2.0 功能

1. 两种调用方式
推荐调用方式:本身即el=this 主调函数:onfocus="new WdatePicker(this)"
示例1-1:

第二种调用方式:本身即el=this
主调函数:
文本框:id='textbox1'
图像框:onclick="new WdatePicker('textbox1')" textbox1是前面那个文本框的id
示例1-2:

2. 支持自定义皮肤和动态切换皮肤
默认皮肤default:即skin=default 示例和主调函数见示例1-1

whyGreen皮肤:即skin=whyGreen 主调函数:onfocus="new WdatePicker(this,null,false,'whyGreen')"
注意:'whyGreen'要带上单引号,因为是字符串
示例2-1:

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

示例3-1:

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

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

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

6. 支持自定义时间和日期格式

主调函数:onfocus="new WdatePicker(this,'%Y年%M月%D日 %h时%m分%s秒',true)"
示例6-1:
那么像这样的文本框我们存入数据库时这么取得实际的日期值呢,别急,用这个函数 document.getElementById('textbox2').getValue()

7. 支持多国语言设置
语言设置请参考默认设置的更改和相关说明

My97日期控件 My97 DatePicker Ver 2.1 功能介绍和使用说明返回特性演示

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

基本使用:

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",另外:你需要修改默認設置里面的語言設置,把對應的簡體中文改成繁體中文

主调函数的使用方法和说明
主调方法: 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
相关的例子请参考上面的特性演示

默认设置的更改和相关说明
默认设置和相关参数的更改在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;
}

联系My97:

****************************************************
* 如果您在使用过程中遇到问题,或者有更好的建议
* 欢迎您访问
* BLOG: http://blog.csdn.net/my97/
* MAIL: smallcarrot@163.com
****************************************************/