WdatePicker常用配置属性

一、WdatePicker常用配置属性（可以在WdatePicker方法是配置）
 

属性	类型	默认值	说明
el	Element 或 String	null	指定一个控件或控件的ID,必须具有value或innerHTML属性(如input,textarea,span,div,p等标签都可以),用户存储日期显示值(也就是dateFmt格式化后的值)
vel	Element 或 String	null	指定一个控件或控件的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	string	'auto'	当值为'auto'时 自动根据客户端浏览器的语言自动选择语言 当值为 其他 时 从langList中选择对应的语言
skin	string	'default'	皮肤名称 默认自带 default和whyGreen两个皮肤 另外如果你的css够强的话,可以自己做皮肤
dateFmt	string	'yyyy-MM-dd'	日期显示格式
realDateFmt	string	'yyyy-MM-dd'	计算机可识别的,真正的日期格式 无效日期设置(disabledDates),最大日期(maxDate),最小日期(minDate)以及快速日期都必须与它们相匹配 建议使用默认值
realTimeFmt	string	'HH:mm:ss'
realFullFmt	string	'%Date %Time'
minDate	string	'1900-01-01 00:00:00'	最小日期(注意要与上面的real日期相匹配)
maxDate	string	'2099-12-31 23:59:59'	最大日期(注意要与上面的real日期相匹配)
startDate	string	''	起始日期,既点击日期框时显示的起始日期 为空时,使用今天作为起始日期(默认值) 否则使用传入的日期作为起始日期(注意要与上面的real日期相匹配)
isShowWeek	bool	false	是否显示周
highLineWeekDay	bool	true	是否高亮显示 周六 周日
isShowClear	bool	true	是否显示清空按钮
isShowToday	bool	true	是否显示今天按钮
isShowOthers	bool	true	为true时,第一行空白处显示上月的日期，末行空白处显示下月的日期,否则不显示
readOnly	bool	false	是否只读
errDealMode	int	0	纠错模式设置 可设置3中模式 0 - 提示 1 - 自动纠错 2 - 标记
autoPickDate	bool	null	为false时 点日期的时候不自动输入,而是要通过确定才能输入 为true时 即点击日期即可返回日期值 为null时(推荐使用) 如果有时间置为false 否则置为true
qsEnabled	bool	true	是否启用快速选择功能
quickSel	Array	null	快速选择数据,可以传入5个快速选择日期 注意:日期格式必须与 realDateFmt realTimeFmt realFullFmt 相匹配
disabledDays	Array	null	可以使用此功能禁用周日至周六所对应的日期 0至6 分别代表 周日至周六
disabledDates	Array	null	可以使用此功能禁用所指定的一个或多个日期

二、WdatePicker常用内置函数

函数名	返回值类型	作用域	参数	描述
$dp.$	Element	全局	el [string]: 对象的ID	相当于document.getElementById
$dp.show	void	全局	无	显示日期选择框
$dp.hide	void	全局	无	隐藏日期选择框
$dp.$D	String	全局	id [string]: 对象的ID arg [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格式化后的日期串
$dp.$DV	String	全局	v [string]: 日期字符串 arg [object]: 同上例的arg	将传入的日期字符串,加上定义的日期差量,返回使用real格式化后的日期串

三、多语言支持

通过lang属性,可以为每个日期控件单独配置语言

1、繁体中文 

<input id="d311" class="Wdate" type="text" onFocus="WdatePicker({lang:'zh-tw'})"/>  

2、英文   

<input id="d312" class="Wdate" type="text" onFocus="WdatePicker({lang:'en'})"/> 

 

3、简体中文   

<input id="d313" class="Wdate" type="text" onFocus="WdatePicker({lang:'zh-cn'})"/>  

四、皮肤配置

1、皮肤列表

WdatePicker目录下有个config.js,里面有段代码:

var skinList =
[
{name:'default', charset:'gb2312'},
{name:'whyGreen', charset:'gb2312'},
{name:'blue', charset:'gb2312'},
{name:'simple', charset:'gb2312'}
];

这就是皮肤列表,每个项有name和charset两个属性.

(1)、name 表示皮肤的名称,在配置的时候,skin属性只能是配置列表里面已有的项,否则将自动返回第一项
(2)、charset 表示对应皮肤目录下的css文件:datepicker.css所对应的编码格式

2、皮肤安装说明

(1)、将皮肤文件包拷贝到 skin 目录
(2)、打开 config.js 配置皮肤列表
 

五、日期调用方式

1、常规调用

在input单击或获得焦点调用

<input id="d11" type="text" onClick="WdatePicker()"/>

2、图标触发

使用其他的元素如:<img><div>等触发WdatePicker函数来调用弹出日期框

<input id="d12" type="text"/>
<img οnclick="WdatePicker({el:$dp.$('d12')})" src="skin/datePicker.gif" width="16" height="22" align="absmiddle"/>

六、只读开关,高亮周末功能

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

七、操作按钮自定义

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

<input class="Wdate" type="text" id="d15" onFocus="WdatePicker({isShowClear:false,readOnly:true})"/>

八、自定义弹出位置

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

<input class="Wdate" type="text" id="d16" οnfοcus="WdatePicker({position:{left:100,top:50}})"/>

九、起始日期功能 （日期格式必须与 realDateFmt 和 realTimeFmt 一致）

其中日期格式

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	返回星期的缩写 一 至 六 (英文状态下 Sun to Sat) 。
W	返回周对应的数字 (1 - 53) 。
WW	同上，如果小于两位数，前面补零 (01 - 53) 。

1、静态限制

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

(1)、限制日期的范围是 2006-09-10到2008-12-20

<input id="d411" class="Wdate" type="text" οnfοcus="WdatePicker({skin:'whyGreen',minDate: '2006-09-10', maxDate: '2008-12-20' })"/>

(2)、 限制日期的范围是 2008年2月 到 2008年10月

<input type="text" class="Wdate" id="d413" οnfοcus="WdatePicker({dateFmt: 'yyyy年M月', minDate: '2008-2', maxDate: '2008-10' })"/>

(3)、限制日期的范围是 8:00:00 到 11:30:00

<input type="text" class="Wdate" id="d414" οnfοcus="WdatePicker({dateFmt: 'H:mm:ss', minDate: '8:00:00', maxDate: '11:30:00' })"/>

2. 动态限制

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

 其中，动态变量表

格式	说明
%y	当前年
%M	当前月
%d	当前日
%ld	本月最后一天
%H	当前时
%m	当前分
%s	当前秒
#{}	运算表达式,如:#{%d+1}:表示明天
#F{}	{}之间是函数可写自定义JS代码

例如：

(1)、只能选择今天以前的日期(包括今天)

<input id="d421" class="Wdate" type="text" οnfοcus="WdatePicker({skin:'whyGreen',maxDate:'%y-%M-%d'})"/>

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

<input id="d422" class="Wdate" type="text" οnfοcus="WdatePicker({minDate:'%y-%M-#{%d+1}'})"/>

(3)、只能选择本月的日期1号至本月最后一天

<input id="d423" class="Wdate" type="text" οnfοcus="WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld'})"/>

(4)、只能选择今天7:00:00至明天21:00:00的日期

<input id="d424" class="Wdate" type="text" οnfοcus="WdatePicker({dateFmt:'yyyy-M-d H:mm:ss',minDate:'%y-%M-%d 7:00:00',maxDate:'%y-%M-#{%d+1} 21:00:00'})"/>

(5)、只能选择 20小时前 至 30小时后 的日期

<input id="d425" class="Wdate" type="text" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',minDate:'%y-%M-%d #{%H-20}:%m:%s',maxDate:'%y-%M-%d #{%H+30}:%m:%s'})"/>

十、通过JS自定义任何你想要的日期限制

例如：自动转到随机生成的一天

<script>
//返回一个随机的日期
function randomDate(){
var Y = 2000 + Math.round(Math.random() * 10);
var M = 1 + Math.round(Math.random() * 11);
var D = 1 + Math.round(Math.random() * 27);
return Y+'-'+M+'-'+D;
}
</script>
<input type="text" class="Wdate" id="d434" onFocus="var date=randomDate();WdatePicker({minDate:date,maxDate:date}) "/>

十一、禁用某天

可以使用此功能禁用周日至周六所对应的日期,相关属性:disabledDays (0至6 分别代表 周日至周六)

例如：禁用 周六 所对应的日期

<input id="d441" type="text" class="Wdate" onFocus="WdatePicker({disabledDays: [6] })"/>

十二、禁用部分日期

例如

1、['2008-02-01','2008-02-29'] 表示禁用 2008-02-01 和 2008-02-29
2、['2008-..-01','2008-02-29'] 表示禁用 2008-所有月份-01 和 2008-02-29
3、['200[0-8]]-02-01','2008-02-29'] 表示禁用 [2000至2008]-02-01 和 2008-02-29
4、['^2006'] 表示禁用 2006年的所有日期

5、['....-..-01','%y-%M-%d'] 表示禁用 所有年份和所有月份的第一天和今天
6、['%y-%M-#{%d-1}','%y-%M-#{%d+1}'] 表示禁用 昨天和明天
7、['....-..-.. 10\:00\:00'] 表示禁用 每天10点 (注意 : 需要 使用 \: )

8、禁用 每个月份的 5日 15日 25日

<input id="d451" type="text" class="Wdate" onFocus="WdatePicker({disabledDates: ['5$'] })"/>

其中： '5$' 表示以 5 结尾

9、 禁用 所有早于2000-01-01的日期

<input id="d452" type="text" class="Wdate" onFocus="WdatePicker({disabledDates: ['^19'] })"/>

其中：'^19' 表示以 19 开头

10、本月可用日期分隔成五段 分别是: 1-3 8-10 16-24 26,27 29-月末

<input id="d453" type="text" class="Wdate" onFocus="WdatePicker({minDate: '%y-%M-01' ,maxDate: '%y-%M-%ld' ,disabledDates: ['0[4-7]$','1[1-5]$','2[58]$'] })"/>