《My97DatePicker控件使用说明.docx》由会员分享,可在线阅读,更多相关《My97DatePicker控件使用说明.docx(42页珍藏版)》请在冰豆网上搜索。
$wdate=true时,在input里加上class="Wdate"就会在选择框右边出现日期图标,如果您不喜欢这个样式,可以把class="Wdate"去掉,另外也可以通过修改skin目录下的WdatePicker.css文件来修改样式
等触发WdatePicker函数来调用弹出日期框
1.除了支持常规在input单击或获得焦点调用外,还支持使用其他的元素如:
等触发WdatePicker函数来调用弹出日期框
示例1-1-1常规调用
示例1-1-2图标触发
'd12'})"src="../skin/datePicker.gif"width="16"height="22"align="absmiddle">
注意:
只需要传入控件的id即可
2.下拉,输入,导航选择日期
年月时分秒输入框都具备以下三种特性
1.通过导航图标选择
2.直接使用键盘输入数字
3.直接从弹出的下拉框中选择
另:
年份输入框有智能提示功能,当用户连续点击同一个导航按钮5次时,会自动弹出年份下拉框
3.支持周显示
可以通过配置isShowWeek属性决定是否限制周,并且在返回日期的时候还可以通过自带的自定义事件和API函数返回选择的周
示例1-2-1周显示简单应用
true})"/>
注意:
周算法参考的是ISO8601定义的方法,如果您对此有疑问,请详见:
http:
//en.wikipedia.org/wiki/ISO_week_date
周算法选择(4.7新增)
相关属性:
whichDayIsfirstWeek
周算法不同的地方有一些差异
常见算法有三种
1.ISO8601:
规定第一个星期四为第一周,默认值:
4
2.MSExcel:
1月1日所在的周:
可以填写:
7
3.自己根据需要自定义,每年的第一个星期X作为第一周,可以填写:
X(X可以是1-7之间任何一个数字)
示例1-2-2利用onpicked事件把周赋值给另外的文本框
您选择了第
(W格式)周,另外您可以使用WW格式:
周
true,onpicked:
function(){$dp.$('d122_1').value=$dp.cal.getP('W','W');$dp.$('d122_2').value=$dp.cal.getP('W','WW');}})"/>
onpicked用法详见自定义事件
$dp.cal.getP用法详见内置函数和属性
4.只读开关,高亮周末功能
设置readOnly属性true或false可指定日期框是否只读
设置highLineWeekDay属性ture或false可指定是否高亮周末
5.操作按钮自定义
清空按钮和今天按钮,可以根据需要进行自定义,它们分别对应isShowClear和isShowToday默认值都是true
示例1-5禁用清空功能
最好把readOnly置为true,否则即使隐藏了清空按钮,用户依然可以在输入框里把值delete掉
false,readOnly:
true})"/>
6.自动选择显示位置
当控件处在页面边界时,它会自动选择显示的位置,所以没有必要担心弹出框会被页面边界遮住的问题了.
7.自定义弹出位置
当控件处在页面边界时,它会自动选择显示的位置.此外你还可以使用position参数对弹出位置做调整.
示例1-6通过position属性,自定义弹出位置
使用positon属性指定,弹出日期的坐标为{left:
100,top:
50}
{left:
100,top:
50}})"/>
position属性的详细用法详见属性表
8.自定义星期的第一天(4.6新增)
各个国家的习惯不同,有些喜欢以星期日作为第一天,有些以星期一作为第一天.
相关属性:
firstDayOfWeek:
可设置0-6的任意一个数字,0:
星期日1:
星期一以此类推
示例1-7以星期一作为第一天
1})"/>
2.特色功能
1.平面显示
日期控件支持平面显示功能,只要设置一下eCont属性就可以把它当作日历来使用了,无需触发条件,直接显示在页面上
示例2-1平面显示演示
WdatePicker({eCont:
'div1',onpicked:
function(dp){alert('你选择的日期是:
'+dp.cal.getDateStr())}})
$dp.cal.getDateStr用法详见内置函数和属性
2.支持多种容器
除了可以将值返回给input以外,还可以通过配置el属性将值返回给其他的元素(如:
textarea,div,span)等,带有innerHTML属性的HTML元素
示例2-2将日期返回到中
2008-01-01
代码:
2008-01-01
'demospan'})"src="../../My97DatePicker/skin/datePicker.gif"width="16"height="22"align="absmiddle"style="cursor:
pointer"/>
3.起始日期功能
注意:
日期格式必须与realDateFmt和realTimeFmt一致而不是与dateFmt一致
有时在项目中需要选择生日之类的日期,而默认点开始日期都是当前日期,导致年份选择非常麻烦,你可以通过起始日期功能加上配置alwaysUseStartDate属性轻松解决此类问题
示例2-3-1起始日期简单应用
默认的起始日期为1980-05-01
当日期框为空值时,将使用1980-05-01做为起始日期
'1980-05-01'})"/>
示例2-3-2alwaysUseStartDate属性应用
默认的起始日期为1980-05-01
当日期框无论是何值,始终使用1980-05-01做为起始日期
'1980-05-01',alwaysUseStartDate:
true})"/>
示例2-3-3使用内置参数
除了使用静态的日期值以外,还可以使用动态参数(如:
%y,%M分别表示当前年和月)
下例演示,年月日使用当年当月的1日,时分秒使用00:
00:
00作为起始时间
'%y-%M-0100:
00:
00',dateFmt:
'yyyy-MM-ddHH:
mm:
ss',alwaysUseStartDate:
true})"/>
4.自定义格式
yMdHmswW分别代表年月日时分秒星期周,你可以任意组合这些元素来自定义你个性化的日期格式.
日期格式表
格式
说明
y
将年份表示为最多两位数字。
如果年份多于两位数,则结果中仅显示两位低位数。
yy
同上,如果小于两位数,前面补零。
yyy
将年份表示为三位数字。
如果少于三位数,前面补零。
yyyy
将年份表示为四位数字。
如果少于四位数,前面补零。
M
将月份表示为从1至12的数字
MM
同上,如果小于两位数,前面补零。
MMM
返回月份的缩写一月至十二月(英文状态下JantoDec)。
MMMM
返回月份的全称一月至十二月(英文状态下JanuarytoDecember)。
d
将月中日期表示为从1至31的数字。
dd
同上,如果小于两位数,前面补零。
H
将小时表示为从0至23的数字。
HH
同上,如果小于两位数,前面补零。
m
将分钟表示为从0至59的数字。
mm
同上,如果小于两位数,前面补零。
s
将秒表示为从0至59的数字。
ss
同上,如果小于两位数,前面补零。
w
返回星期对应的数字0(星期天)-6(星期六)。
D
返回星期的缩写一至六(英文状态下SuntoSat)。
DD
返回星期的全称星期一至星期六(英文状态下SundaytoSaturday)。
W
返回周对应的数字(1-53)。
WW
同上,如果小于两位数,前面补零(01-53)。
示例
格式字符串
值
yyyy-MM-ddHH:
mm:
ss
2008-03-1219:
20:
00
yy年M月
08年3月
yyyyMMdd
20080312
今天是:
yyyy年M年dHH时mm分
今天是:
2008年3月12日19时20分
H:
m:
s
19:
20:
0
y年
8年
MMMMd,yyyy
三月12,2008
示例2-4-1:
年月日时分秒
'yyyy年MM月dd日HH时mm分ss秒'})"class="Wdate"style="width:
300px"/>
注意:
点两次才能选择日期的原因,详见autoPickDate属性
示例2-4-2时分秒
'whyGreen',dateFmt:
'H:
mm:
ss'})"class="Wdate"/>
注意:
这里提前使用了皮肤(skin)属性,所以你会看到一个不同的皮肤,皮肤属性详见自定义和动态切换皮肤
示例2-4-3年月
'whyGreen',dateFmt:
'yyyy年MM月'})"class="Wdate"/>
示例2-4-4取得系统可识别的日期值(重要)
类似于1999年7月5日这样的日期是不能够被系统识别的,他必须转换为能够识别的类型如1999-07-05
真实的日期值是:
'yyyy年M月d日',vel:
'd244_2'})"/>
注意:
在实际应用中,一般会把vel指定为一个hidden控件,这里是为了把真实值展示出来,所以使用文本框
关键属性:
vel指定一个控件或控件的ID,必须具有value属性(如input),用于存储真实值(也就是realDateFmt和realTimeFmt格式化后的值)
示例2-4-5星期,月日,年(4.6新增)
'DD,MMMMd,yyyy'})"class="Wdate"/>
5.双月日历功能(4.6新增)
可以同时弹出两个月的日历
示例2-5双月日历功能
true,dateFmt:
'yyyy-MM-dd'})"/>
注意:
双月日历一般只用于包含年月日三个元素的场景,另外设置该属性时,autoPickDate自动设置为true
6.自动纠错功能
纠错处理可设置为3种模式:
提示(默认)自动纠错标记,当日期框中的值不符合格式时,系统会尝试自动修复,如果修复失败会根据您设置的纠错处理模式进行处理,错误判断功能非常智能它可以保证用户输入的值是一个合法的值
示例2-6-1不合法的日期演示
请在下面的日期框中填入一个不合法的日期(如:
1997-02-29),再尝试离开焦点
使用默认容错模式提示模式errDealMode=0在输入错误日期时,会先提示
注意:
1997年不是闰年哦
示例2-6-2超出日期限制范围的日期也被认为是一个不合法的日期
最大日期是2000-01-10,如果在下框中填入的日期大于2000-01-10(如2000-01-12)也会被认为是不合法的日期
自动纠错模式errDealMode=1在输入错误日期时,自动恢复前一次正确的值
示例2-6-3使用无效天和无效日期功能限制的日期也被认为是一个不合法的日期
如:
2008-02-20无效日期限制
2008-02-022008-02-092008-02-162008-02-23无效天限制
都是无效日期
您可以尝试在下框中输入这些日期,并离开焦点
标记模式errDealMode=2在输入错误日期时,不做提示和更改,只是做一个标记,但此时日期框不会马上隐藏
注意:
标记类:
WdateFmtErr是在skin目录下WdatePicker.css中定义的
7.跨无限级框架显示
无论你把日期控件放在哪里,你都不需要担心会被外层的iframe所遮挡进而影响客户体验,因为My97日期控件是可以跨无限级框架显示的
示例2-7跨无限级框架演示
可无限跨越框架iframe,无论怎么嵌套框架都不必担心了,即使有滚动条也不怕
注意:
Javascript是无法跨越frameset的,但是My97日期控件可无限跨越框架iframe,任何的frameset都可以使用iframe代替
8.民国年日历和其他特殊日历
当年份格式设置为yyy格式时,利用年份差量属性yearOffset(默认值1911民国元年),可实现民国年日历和其他特殊日历
示例2-8民国年演示
'yyy/MM/dd'})"/>
注意:
年份格式设置成yyy时,真正的日期将会减去一个差量yearOffset(默认值为:
1911),如果是民国年使用默认值即可无需另外配置,如果是其他的差量,可以通过参数的形式配置
9.编辑功能
当日期框里面有值时,修改完某个属性后,只要点击这个按钮就可以实现时间和日期的编辑
示例2-9日期和时间的编辑演示
您可以尝试对下面框中的月份改为1,然后点击更新,你会发现日期由2000-02-2901:
00:
00变为2000-01-2901:
00:
00
10.为编程带来方便
如果el的值是this,可省略,即所有的el:
this都可以不写
日期框设置为disabled时,禁止更改日期(不弹出选择框)
如果没有定义onpicked事件,自动触发文本框的onchange事件
如果没有定义oncleared事件,清空时,自动触发onchange事件
11.其他属性
设置readOnly属性,可指定日期框是否只读
设置highLineWeekDay属性,可指定是否高亮周末
设置isShowOthers属性,可指定是否显示其他月的日期
加上class="Wdate"就会在选择框右边出现日期图标
3.多语言和自定义皮肤
1.多语言支持
通过lang属性,可以为每个日期控件单独配置语言,当然也可以通过WdatePicker.js配置全局的语言
语言列表和语言安装说明详见语言配置
示例3-1多语言示例
繁体中文:
'zh-tw'})"/>
英文:
'en'})"/>
简体中文:
'zh-cn'})"/>
注意:
默认情况lang='auto',即根据浏览器的语言自动选择语言.
技巧:
很多项目中,可能有固定的语言选项,希望可以在日期选择的属性设置中强制某种语言,即:
可以通过后台代码控制语言的选择,其实这个实现起来是很容易的,My97Datepicker是支持多个配置文件共存的,你可以配置类似cn_WdatePicker.js,en_WdatePicker.js(注意命名规则,必须以WdatePicker.js结尾)等等,在这些WdatePicker.js里面设置不同的默认语言,皮肤,格式等其他可以设置的参数,然后在页面里根据你的系统变量引入不同的xx_WdatePicker.js即可
2.自定义和动态切换皮肤立刻转到皮肤中心
通过skin属性,可以为每个日期控件单独配置皮肤,当然也可以通过WdatePicker.js配置全局的皮肤
皮肤列表和皮肤安装说明详见皮肤配置
示例3-2皮肤演示
默认皮肤default:
skin:
'default'
注意:
在WdatePicker里配置了skin='default',所以此处可省略,同理,如果你把WdatePicker里的skin配置成'whyGreen'那么在不指定皮肤的情况下都使用'whyGreen'皮肤了
whyGreen皮肤:
skin:
'whyGreen'
'whyGreen'})"/>
注意:
更多皮肤,请到皮肤中心下载
4.日期范围限制
1.静态限制
注意:
日期格式必须与realDateFmt和realTimeFmt一致而不是与dateFmt一致
你可以给通过配置minDate(最小日期),maxDate(最大日期)为静态日期值,来限定日期的范围
示例4-1-1限制日期的范围是2006-09-10到2008-12-20
'whyGreen',minDate:
'2006-09-10',maxDate:
'2008-12-20'})"/>
示例4-1-2限制日期的范围是2008-3-811:
30:
00到2008-3-1020:
59:
30
'whyGreen',dateFmt:
'yyyy-MM-ddHH:
mm:
ss',minDate:
'2008-03-0811:
30:
00',maxDate:
'2008-03-1020:
59:
30'})"value="2008-03-0911:
00:
00"/>
示例4-1-3限制日期的范围是2008年2月到2008年10月
'yyyy年M月',minDate:
'2008-2',maxDate:
'2008-10'})"/>
示例4-1-4限制日期的范围是8:
00:
00到11:
30:
00
'H:
mm:
ss',minDate:
'8:
00:
00',maxDate:
'11:
30:
00'})"/>