1.引入wdatepicker.js
2.使用wdatepicker
<input id="dd" class="date" type="text" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})"/>
<input id="d12" type="text"/>
<img onclick="WdatePicker({el:$dp.$('d12')})" src="skin/datePicker.gif" width="16" height="22" align="absmiddle">
WdatePicker常用配置属性(可以在WdatePicker方法是配置)
dateFmt: 日期显示格式 ,默认格式yyyy-MM-dd, 根据需要自己定
el:指定一个控件或控件的ID,必须具有value或innerHTML属性(如input,textarea,span,div,p等标签都可以),用户存储日期显示值(也就是dateFmt格式化后的值)
skin: 皮肤 默认值是default
position:自定义弹出位置
realDateFmt,realTimeFmt,realFullFmt:计算机可识别的,真正的日期格式 。默认值分别是yyyy-MM-dd ,HH:mm:ss ,%Date %Time
minDate: 最小日期 ,默认值是1900-01-01 00:00:00,要与上面计算机识别的日期相匹配
maxDate:最大日期,默认值是2099-12-31 23:59:59,要与上面计算机识别的日期相匹配
startDate:默认值“ ”, 起始日期,既点击日期框时显示的起始日期
为空时,使用今天作为起始日期(默认值)
否则使用传入的日期作为起始日期(注意要与上面的real日期相匹配)
highLineWeekDay:默认值true ,是否高亮显示 周六 周日
isShowClear:默认值true ,是否显示清空按钮
isShowToday:默认值true ,是否显示今天按钮
isShowOthers:为true时,第一行空白处显示上月的日期,末行空白处显示下月的日期,否则不显示
readOnly:是否只读
autoPickDate:为false时 点日期的时候不自动输入,而是要通过确定才能输入为true时 即点击日期即可返回日期值
为null时(推荐使用) 如果有时间置为false 否则置为true
qsEnabled:是否启用快速选择功能
disabledDays:(value是数组)可以使用此功能禁用周日至周六所对应的日期0至6 分别代表 周日至周六
disabledDates:(value是数组)可以使用此功能禁用所指定的一个或多个日期
WdatePicker常用内置函数
$dp.$
:返回值类型Element ,参数[string]: 对象的ID
$dp.show
:显示日期选择框
$dp.hide
:隐藏日期选择框
多语言支持
通过lang属性,可以为每个日期控件单独配置语言
lang:’zh-tw’ 繁体中文
lang:’en’ 英文
lang:’zh-cn’ 简体中文
‘%y-%M-%d’:当前时间
可以这么写‘%y-01-01’