My97 DatePicke API.docx

My97 DatePicke API.docx

《My97 DatePicke API.docx》由会员分享，可在线阅读，更多相关《My97 DatePicke API.docx（43页珍藏版）》请在冰豆网上搜索。

My97DatePickeAPI

My97DatePicke

一.简介

1.简介

目前的版本是:

4.7

2.注意事项

∙My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名

∙My97DatePicker.htm是必须文件,不可删除

∙各目录及文件的用途:

WdatePicker.js 配置文件,在调用的地方仅需使用该文件,可多个共存,以xx_WdatePicker.js方式命名

config.js 语言和皮肤配置文件,无需引入

calendar.js 日期库主文件,无需引入

My97DatePicker.htm 临时页面文件,不可删除

目录lang 存放语言文件,你可以根据需要清理或添加语言文件

目录skin 存放皮肤的相关文件,你可以根据需要清理或添加皮肤文件包

∙当WdatePicker.js里的属性:

$wdate=true时,在input里加上class="Wdate"就会在选择框右边出现日期图标,如果您不喜欢这个样式,可以把class="Wdate"去掉,另外也可以通过修改skin目录下的WdatePicker.css文件来修改样式

3.支持的浏览器

IE6.0+,Firefox2.0+,Chrome,Opera9.5+,Safari3.0+

注意:

IE8.0是完美支持的,如果你在IE8上使用遇到问题,请与我取得联系,务必附上能再现你的问题的纯HTML代码包

二.功能及示例

1.常规功能

1.支持多种调用模式

除了支持常规在input单击或获得焦点调用外,还支持使用其他的元素如:

$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'}）"/>

2.动态限制

注意:

日期格式必须与realDateFmt和realTimeFmt一致而不是与dateFmt一致

你