3.0.1正式版已经发布,详情请点击下面的网址:
http://blog.csdn.net/My97/archive/2007/06/27/1668503.aspx
功能介绍和使用说明
/*****************************************************
* 2.0版更新说明(加*为2.0新增功能)
* 支持两种调用方式*
* 支持自定义皮肤和动态切换皮肤(感谢why提供whyGreen皮肤)*
* 跨越框架显示选择框
* 自动提示日期错误
* 年份,月份设置为选择模式*
* 支持日期和时间的编辑,编辑时自动跳转到对应月份和时间
* 根据网页大小自动选择显示位置
* 支持时间选择*
* 自定义日期时间格式*
* 支持多国语言设置*
* 支持周末加亮设置*
* 支持编码设置(如utf-8,gb2312,big5)*
* 完美支持FireFox,在FF中的效果跟IE一模一样
* ---------------------------------------------------
* 修正不能通过小键盘输入日期的bug
* 修正在IE6中没有盖住<SELECT>的bug
* 修正预览版中两个七月的错误(感谢weilf提出)
* ---------------------------------------------------
* 联系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')"
相信大家已经知道这么用了,如果还不明白请Q我: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.aWeekStr = ["日","一","二","三","四","五","六"];
dpcfg.aMonStr = ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一","十二"];
dpcfg.todayStr = "今天";
dpcfg.okStr = "确定";
dpcfg.timeStr = "时间";
/* 输入错误日期时的提示信息 */
dpcfg.dateErrStr = "请输入一个正确的日期格式!";
自定义皮肤的相关说明
皮肤是可以自定义的,
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;
}
/* 日期选择容器 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);
}
/* 年份月份输入框获得焦点时的样式 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;
}
.WdateDiv .ymsel table td{
color:#11777C;
}
/* 年月选择框的样式 TD */
.WdateDiv .Wym{
cursor:pointer;
background-color:#fff;
}
/* 年月选择框的mouseover样式 TD */
.WdateDiv .WymOn{
cursor:pointer;
background-color:#BEEBEE;
}
/****************************
* 星期,日期相关
***************************/
/* 日期栏表格 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 ;
}
/****************************
* 时间相关
***************************/
/* 时间栏 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;
}
下载之前顶一下我在CSDN发表的帖子哦,万分感谢!
http://community.csdn.net/Expert/topic/5283/5283758.xml?temp=.8240473
演示地址:http://www.waytop.net/my97/datepicker/2.0/demo2.0.html
下载地址:http://www.waytop.net/my97/datepicker/My97DatePicker2.0.rar
联系My97:
****************************************************
* 如果您在使用过程中遇到问题,或者有更好的建议
* 欢迎您访问
* BLOG: http://blog.csdn.net/my97/
* MAIL: smallcarrot@163.com
****************************************************/
发表于 @ 2007年01月09日 11:41:00|评论(loading...)|编辑