wDatePicker使用说明文档大猫一只

示例1-1-1常规调用

示例1-1-2图标触发

年月时分秒输入框都具备以下三种特性1.通过导航图标选择2.直接使用键盘输入数字3.直接从弹出的下拉框中选择另:年份输入框有智能提示功能,当用户连续点击同一个导航按钮5次时,会自动弹出年份下拉框

可以通过配置isShowWeek属性决定是否限制周,并且在返回日期的时候还可以通过自带的自定义事件和API函数返回选择的周

示例1-2-1周显示简单应用

示例1-2-2利用onpicked事件把周赋值给另外的文本框

设置readOnly属性true或false可指定日期框是否只读设置highLineWeekDay属性ture或false可指定是否高亮周末

清空按钮和今天按钮,可以根据需要进行自定义,它们分别对应isShowClear和isShowToday默认值都是true

示例1-5禁用清空功能

最好把readOnly置为true,否则即使隐藏了清空按钮,用户依然可以在输入框里把值delete掉

当控件处在页面边界时,它会自动选择显示的位置,所以没有必要担心弹出框会被页面边界遮住的问题了.

当控件处在页面边界时,它会自动选择显示的位置.此外你还可以使用position参数对弹出位置做调整.

示例1-6通过position属性,自定义弹出位置

2.特色功能

日期控件支持平面显示功能,只要设置一下eCont属性就可以把它当作日历来使用了,无需触发条件,直接显示在页面上

示例2-1平面显示演示

除了可以将值返回给input以外,还可以通过配置el属性将值返回给其他的元素(如:textarea,div,span)等,带有innerHTML属性的HTML元素

示例2-2将日期返回到中

有时在项目中需要选择生日之类的日期,而默认点开始日期都是当前日期,导致年份选择非常麻烦,你可以通过起始日期功能加上配置alwaysUseStartDate属性轻松解决此类问题

示例2-3-1起始日期简单应用

默认的起始日期为1980-05-01当日期框为空值时,将使用1980-05-01做为起始日期

示例2-3-2alwaysUseStartDate属性应用

默认的起始日期为1980-05-01当日期框无论是何值,始终使用1980-05-01做为起始日期

示例2-3-3使用内置参数

yMdHmswW分别代表年月日时分秒星期周,你可以任意组合这些元素来自定义你个性化的日期格式.

日期格式表

格式

说明

y

将年份表示为最多两位数字。如果年份多于两位数，则结果中仅显示两位低位数。

yy

同上，如果小于两位数，前面补零。

yyy

将年份表示为三位数字。如果少于三位数，前面补零。

yyyy

将年份表示为四位数字。如果少于四位数，前面补零。

M

将月份表示为从1至12的数字

MM

d

将月中日期表示为从1至31的数字。

dd

H

将小时表示为从0至23的数字。

HH

m

将分钟表示为从0至59的数字。

mm

s

将秒表示为从0至59的数字。

ss

w

返回星期对应的数字0(星期天)-6(星期六)。

D

返回星期的缩写一至六(英文状态下SuntoSat)。

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年

示例2-4-1:年月日时分秒

示例2-4-2时分秒

示例2-4-3年月

示例2-4-4取得系统可识别的日期值(重要)

类似于1999年7月5日这样的日期是不能够被系统识别的,他必须转换为能够识别的类型如1999-07-05真实的日期值是:注意:在实际应用中,一般会把vel指定为一个hidden控件,这里是为了把真实值展示出来,所以使用文本框关键属性:vel指定一个控件或控件的ID,必须具有value属性(如input),用于存储真实值(也就是realDateFmt和realTimeFmt格式化后的值)

您可以尝试对下面框中的月份改为1,然后点击更新,你会发现日期由2000-02-2901:00:00变为2000-01-2901:00:00

纠错处理可设置为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中定义的

无论你把日期控件放在哪里,你都不需要担心会被外层的iframe所遮挡进而影响客户体验,因为My97日期控件是可以跨无限级框架显示的

示例2-7跨无限级框架演示

可无限跨越框架iframe,无论怎么嵌套框架都不必担心了,即使有滚动条也不怕

当年份格式设置为yyy格式时,利用年份差量属性yearOffset(默认值1911民国元年),可实现民国年日历和其他特殊日历

示例2-8民国年演示

注意:年份格式设置成yyy时,真正的日期将会减去一个差量yearOffset(默认值为:1911),如果是民国年使用默认值即可无需另外配置,如果是其他的差量,可以通过参数的形式配置

如果el的值是this,可省略,即所有的el:this都可以不写日期框设置为disabled时,禁止更改日期(不弹出选择框)如果没有定义onpicked事件,自动触发文本框的onchange事件如果没有定义oncleared事件,清空时,自动触发onchange事件

设置readOnly属性,可指定日期框是否只读设置highLineWeekDay属性,可指定是否高亮周末设置isShowOthers属性,可指定是否显示其他月的日期加上class="Wdate"就会在选择框右边出现日期图标

3.多语言和自定义皮肤

示例3-1多语言示例

繁体中文:

英文:

简体中文:注意:默认情况lang='auto',即根据浏览器的语言自动选择语言.

示例3-2皮肤演示

默认皮肤default:skin:'default'注意:在WdatePicker里配置了skin='default',所以此处可省略,同理,如果你把WdatePicker里的skin配置成'whyGreen'那么在不指定皮肤的情况下都使用'whyGreen'皮肤了

4.日期范围限制

你可以给通过配置minDate(最小日期),maxDate(最大日期)为静态日期值,来限定日期的范围

示例4-1-1限制日期的范围是2006-09-10到2008-12-20

示例4-1-2限制日期的范围是2008-3-811:30:00到2008-3-1020:59:30

示例4-1-3限制日期的范围是2008年2月到2008年10月

示例4-1-4限制日期的范围是8:00:00到11:30:00

你可以通过系统给出的动态变量,如%y(当前年),%M(当前月)等来限度日期范围,你还可以通过#{}进行表达式运算,如:#{%d+1}:表示明天动态变量表

%y

当前年

%M

当前月

%d

当前日

%ld

本月最后一天

%H

当前时

%m

当前分

%s

当前秒

#{}

运算表达式,如:#{%d+1}:表示明天

#F{}

{}之间是函数可写自定义JS代码

示例4-2-1只能选择今天以前的日期(包括今天)

示例4-2-2使用了运算表达式只能选择今天以后的日期(不包括今天)

示例4-2-3只能选择本月的日期1号至本月最后一天

示例4-2-4只能选择今天7:00:00至明天21:00:00的日期

示例4-2-5使用了运算表达式只能选择20小时前至30小时后的日期

系统提供了$dp.$D和$dp.$DV这两个API来辅助你进行日期运算,此外你还可以通过在#F{}中填入你自定义的脚本,做任何你想做的日期限制

示例4-3-1前面的日期不能大于后面的日期且两个日期都不能大于2020-10-01

合同有效期从到注意:两个日期的日期格式必须相同$dp.$相当于document.getElementById函数.那么为什么里面的'使用\'呢那是因为"和'都被外围的函数使用了,故使用转义符\,否则会提示JS语法错误.所以您在其他地方使用时注意把\'改成"或者'来使用.#F{$dp.$D(\'d4312\')||\'2020-10-01\'}表示当d4312为空时,采用2020-10-01的值作为最大值

示例4-3-2前面的日期+3天不能大于后面的日期

日期从到使用$dp.$D函数可以将日期框中的值,加上定义的日期差量:两个参数:id={字符类型}需要处理的文本框的id值,obj={对象类型}日期差量日期差量用法:属性y,M,d,H,m,s分别代表年月日时分秒如为空时,表示直接取值,不做差量(示例4-3-1中的参数就是空的){M:5,d:7}表示五个月零7天{y:1,d:-3}表示1年少3天{d:1,H:1}表示一天多1小时

示例4-3-3前面的日期+3月零2天不能大于后面的日期且前面日期都不能大于2020-4-3减去3月零2天后面日期不能大于2020-4-3

住店日期从到注意:#F{$dp.$D(\'d4332\',{M:-3,d:-2})||$dp.$DV(\'2020-4-3\',{M:-3,d:-2})}表示当d4332为空时,采用$dp.$DV(\'2020-4-3\',{M:-3,d:-2})}的值作为最大值

使用$dp.$DV函数可以将显式传入的值,加上定义的日期差量:两个参数:value={字符类型}需要处理的值,obj={对象类型}日期差量用法同上面的$dp.$D类似,如$dp.$DV(\'2020-4-3\',{M:-3,d:-2})表示2020-4-3减去3月零2天

示例4-3-4发挥你的JS才能,定义任何你想要的日期限制

自动转到随机生成的一天,当然,此示例没有实际的用途,只是为演示目的

示例4-4-1禁用周六所对应的日期

示例4-4-2通过position属性,自定义弹出位置

可以使用此功能禁用,所指定的一个或多个日期,只要你熟悉正则表达式,你可以尽情发挥用法(正则匹配):如果你熟悉正则表达式,会很容易理解下面的匹配用法如果不熟悉,可以参考下面的常用示例['2008-02-01','2008-02-29']表示禁用2008-02-01和2008-02-29['2008-..-01','2008-02-29']表示禁用2008-所有月份-01和2008-02-29['200[0-8]]-02-01','2008-02-29']表示禁用[2000至2008]-02-01和2008-02-29['^2006']表示禁用2006年的所有日期

此外,您还可以使用%y%M%d%H%m%s等变量,用法同动态日期限制注意:%ld不能使用['....-..-01','%y-%M-%d']表示禁用所有年份和所有月份的第一天和今天['%y-%M-#{%d-1}','%y-%M-#{%d+1}']表示禁用昨天和明天

不再多举例了,尽情发挥你的正则才能吧!

示例4-5-1禁用每个月份的5日15日25日

注意:'5$'表示以5结尾注意$的用法

示例4-5-2禁用所有早于2000-01-01的日期

注意:'^19'表示以19开头注意^的用法当然,可以使用minDate实现类似的功能这里主要是在演示^的用法

示例4-5-3配合min/maxDate使用,可以把可选择的日期分隔成多段

本示例本月可用日期分隔成五段分别是:1-38-1016-2426,2729-月末

示例4-5-4min/maxDatedisabledDaysdisabledDates配合使用即使在要求非常苛刻的情况下也能满足需求

示例4-5-6#F{}也是可以使用的

本示例利用自定义函数随机禁用0-23中的任何一个小时打开小时选择框,你会发现有一个小时被禁用的,而且每次禁用的小时都不同

使用无效天和无效日期可以很方便的禁用不可用的日期,但是在只需要启用少部分日期的情况下,有效天和有效日期的功能就非常适合了.关键属性:opposite默认为false,为true时,无效天和无效日期变成有效天和有效日期

示例4-6只启用每个月份的5日15日25日

注意:'5$'表示以5结尾注意$的用法

5.自定义事件

如果你需要做一些附加的操作,你也不必担心,日期控件自带的自定义事件可以满足你的需求.此外,你还可以在自定义事件中调用提供的API库来做更多的运算和扩展,绝对可以通过很少的代码满足你及其个性化的需求.注意下面几个重要的指针,将对你的编程带来很多便利this:指向文本框dp:指向$dpdp.cal:指向日期控件对象注意:函数原型必须使用类似function(dp){}的模式,这样子,在函数内部才可以使用dp

示例5-2-1onpicking事件演示

示例5-2-2使用onpicked实现日期选择联动

示例5-2-3将选择的值拆分到文本框

示例5-3-1使用onclearing事件取消清空操作

注意:当onclearing函数返回true时,系统的清空事件将被取消,函数体里面没有引用$dp,所以函数原型里面可以省略参数dp

示例5-3-2使用cal对象取得当前日期所选择的月份(使用了dp.cal)

示例5-3-3综合使用两个事件

6.快速选择功能

示例6-1传入2个静态日期

注意:当传入的数据不足5个时,系统将自动补全

示例6-2传入2个动态日期,1个静态日期

注意:当传入的数据不足5个时,系统将自动补全

三.配置说明

1.属性配置

属性

类型

默认值

静态属性:只能在WdatePicker.js中配置,一般情况下,不建议您修改静态属性的值

$wdate

bool

true

是否自动引入Wdate类设置为true时,可直接在引入WdatePicker.js的页面里使用class="Wdate"Wdate可在skin目录下的WdatePicker.css文件中定义建议使用默认值

$dpPath

string

''

可配置属性:可以在WdatePicker方法是配置

el

Element或String

null

指定一个控件或控件的ID,必须具有value或innerHTML属性(如input,textarea,span,div,p等标签都可以),用户存储日期显示值(也就是dateFmt格式化后的值)

vel

指定一个控件或控件的ID,必须具有value属性(如input),用于存储真实值(也就是realDateFmt和realTimeFmt格式化后的值)

position

object

{}

日期选择框显示位置注意:坐标默认单位是px,是相对当前框架坐标(不受滚动条),left属性只接受数字,top属性除接受数字外还可以接受'above'上方显示,'under'下方显示,'auto'系统根据页面大小自动选择(默认)如:{left:100,top:50}表示固定坐标[100,50]{top:50}表示横坐标自动生成,纵坐标指定为50{left:100}表示纵坐标自动生成,横坐标指定为100{top:'above'}表示上方显示{top:'under'}表示下方显示请参考示例

lang

'auto'

skin

'default'

dateFmt

'yyyy-MM-dd'

realDateFmt

计算机可识别的,真正的日期格式无效日期设置(disabledDates),最大日期(maxDate),最小日期(minDate)以及快速日期都必须与它们相匹配建议使用默认值

realTimeFmt

'HH:mm:ss'

realFullFmt

'%Date%Time'

minDate

'1900-01-0100:00:00'

最小日期(注意要与上面的real日期相匹配)

maxDate

'2099-12-3123:59:59'

最大日期(注意要与上面的real日期相匹配)

startDate

isShowWeek

false

highLineWeekDay

是否高亮显示周六周日

isShowClear

是否显示清空按钮

isShowToday

是否显示今天按钮

isShowOthers

为true时,第一行空白处显示上月的日期，末行空白处显示下月的日期,否则不显示

readOnly

是否只读

errDealMode

int

0

纠错模式设置可设置3中模式0-提示1-自动纠错2-标记

autoPickDate

qsEnabled

是否启用快速选择功能

quickSel

Array

disabledDays

disabledDates

opposite

onpicking

function

onpicked

onclearing

oncleared

通过配置WdatePicker.js的属性可以避免每次调用都传入配置值,为变成带来很多方便.在默认情况下My97为每个属性都配置了默认值,这些默认值都可以在WdatePicker.js中修改的你可以根据你个人的喜好更改这些值比如你比较不喜欢默认的皮肤default而更喜欢whyGreen这个皮肤,你可以直接在WdatePicker.js把skin值改为whyGreen这样,你就不必每次调用控件的时候都传入skin:'whyGreen'了你学会了吗

在控件里面你可以使用onfocus或onclick事件来调用WdatePicker函数来触发日期控件WdatePicker({})其中{}中的内容都是只对当前实例有效,你可以任意配置属性表里有的所有属性你可以随意的组合这些属性,达到你的需求My97日期控件在这方面是做得非常灵活的.

您可以设置多个WdatePicker.js文件,如cn_WdatePicker.js,en_WdatePicker.js,simple_WdatePicker.js等在不同的页面引入不同的WdatePicker.js达到配置快速切换的目的.注意:文件必须以_WdatePicker.js(大小写不限制)为后缀,形如_WdatePicker.js

2.语言配置

My97DatePicker目录下有个config.js,里面有段代码:varlangList=[{name:'en',charset:'UTF-8'},{name:'zh-cn',charset:'gb2312'},{name:'zh-tw',charset:'GBK'}];这就是语言列表,每个项有name和charset两个属性.name表示语言的名称(必须与浏览器的语言字符串命名相同),在配置的时候,lang属性只能是配置列表里面已有的项,否则将自动返回第一项charset表示对应语言目录下的js文件所对应的编码格式

分两步轻松实现:1将语言文件拷贝到lang目录2打开config.js配置语言列表

3.皮肤配置

My97DatePicker目录下有个config.js,里面有段代码:varskinList=[{name:'default',charset:'gb2312'},{name:'whyGreen',charset:'gb2312'},{name:'blue',charset:'gb2312'},{name:'simple',charset:'gb2312'}];这就是皮肤列表,每个项有name和charset两个属性.name表示皮肤的名称,在配置的时候,skin属性只能是配置列表里面已有的项,否则将自动返回第一项charset表示对应皮肤目录下的css文件:datepicker.css所对应的编码格式

分两步轻松实现:1将皮肤文件包拷贝到skin目录2打开config.js配置皮肤列表注意:安装过多的皮肤会影响效率,一般5个以下比较适宜

四.如何使用

五.内置函数

函数名

返回值类型

作用域

参数

描述

$dp.$

Element

全局

el[string]:对象的ID

相当于document.getElementById参考示例1-1-2

$dp.show

void

无

显示日期选择框

$dp.hide

隐藏日期选择框

$dp.$D

String

id[string]:对象的IDarg[object]:日期差量,可以设置成{y:[值],M:[值],d:[值],H:[值],m:[值],s:[值]}属性y,M,d,H,m,s分别代表年月日时分秒{M:3,d:7}表示3个月零7天{d:1,H:1}表示1天多1小时

将id对应的日期框中的日期字符串,加上定义的日期差量,返回使用real格式化后的日期串参考示例4-3-2

$dp.$DV

v[string]:日期字符串arg[object]:同上例的arg

将传入的日期字符串,加上定义的日期差量,返回使用real格式化后的日期串参考示例4-3-3

以下函数只在事件自定义函数中有效

$dp.cal.getP

事件function

p[string]:属性名称yMdHmswWD分别代表年,月,日,时,分,秒,星期(0-6),周(1-52),星期(一-六)f[string]:format格式字符串设置方法参考1.4自定义格式

返回所指定属性被格式字符串格式化后的值[单属性]参考示例1-2-2