转自：http://blog.sina.com.cn/s/blog_4cb400450100dsj0.html



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

选择第一个日期的时候,第二个日期选择框自动弹出

日期从: 至

注意:下面第一个控件代码的写法

<input id="d5221" class="Wdate" type="text" onFocus="var d5222=$dp.$('d5222');WdatePicker({onpicked:function(){d5222.focus();},maxDate:'#F{$dp.$D(\'d5222\')}'})"/>

至

<input id="d5222" class="Wdate" type="text" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d5221\')}'})"/>

注意:$dp.$是一个内置函数,相当于document.getElementByIdx

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

年 月 日 时 分 秒 My97DatePicker时间选择器 - 496493722 - phper

<input type="text" id="d523_y" size="5"/> 年

<input type="text" id="d523_M" size="3"/> 月

<input type="text" id="d523_d" size="3"/> 日

<input type="text" id="d523_HH" size="3"/> 时

<input type="text" id="d523_mm" size="3"/> 分

<input type="text" id="d523_ss" size="3"/> 秒

<img HH:mm:ss',onpicked:pickedFunc})" src="http://cyxinda.blog.163.com/blog/../../My97DatePicker/skin/datePicker.gif" width="16" height="22" align="absmiddle" style="cursor:pointer"/>

<script>

function pickedFunc(){

$dp.$('d523_y').value=$dp.cal.getP('y');

$dp.$('d523_M').value=$dp.cal.getP('M');

$dp.$('d523_d').value=$dp.cal.getP('d');

$dp.$('d523_HH').value=$dp.cal.getP('H');

$dp.$('d523_mm').value=$dp.cal.getP('m');

$dp.$('d523_ss').value=$dp.cal.getP('s');

}

</script>

注意:el:'d523'中,如果你不需要d523这个框,你可以把他改成hidden,但是el属性必须指定

$dp.$和$dp.cal.getP都是内置函数


onclearing 和 oncleared 事件  语言配置
skinstring'default'皮肤名称 默认自带 default和whyGreen两个皮肤

 

另外如果你的css够强的话,可以自己做皮肤

你可以参考皮肤配置

dateFmtstring'yyyy-MM-dd'日期显示格式

 

你可以参考自定义格式

realDateFmtstring'yyyy-MM-dd'计算机可识别的,真正的日期格式

 

无效日期设置(disabledDates),最大日期(maxDate),最小日期(minDate)以及快速日期都必须与它们相匹配

建议使用默认值

realTimeFmtstring'HH:mm:ss'
realFullFmtstring'%Date %Time'
minDatestring'1900-01-01 00:00:00'最小日期(注意要与上面的real日期相匹配)
maxDatestring'2099-12-31 23:59:59'最大日期(注意要与上面的real日期相匹配)
startDatestring''起始日期,既点击日期框时显示的起始日期

 

为空时,使用今天作为起始日期(默认值)

否则使用传入的日期作为起始日期(注意要与上面的real日期相匹配)

你可以参考起始日期示例

isShowWeekboolfalse是否显示周

 

你可以参考周显示示例

highLineWeekDaybooltrue是否高亮显示 周六 周日
isShowClearbooltrue是否显示清空按钮
isShowTodaybooltrue是否显示今天按钮
isShowOthersbooltrue为true时,第一行空白处显示上月的日期，末行空白处显示下月的日期,否则不显示
readOnlyboolfalse是否只读
errDealModeint0纠错模式设置 可设置3中模式 0 - 提示 1 - 自动纠错 2 - 标记
autoPickDateboolnull为false时 点日期的时候不自动输入,而是要通过确定才能输入

 

为true时 即点击日期即可返回日期值

为null时(推荐使用) 如果有时间置为false 否则置为true

qsEnabledbooltrue是否启用快速选择功能
quickSelArraynull快速选择数据,可以传入5个快速选择日期

 

注意:日期格式必须与 realDateFmt realTimeFmt realFullFmt 相匹配

你可以参考快速选择示例

disabledDaysArraynull可以使用此功能禁用周日至周六所对应的日期

 

0至6 分别代表 周日至周六

你可以参考无效天示例

disabledDatesArraynull可以使用此功能禁用所指定的一个或多个日期

 

你可以参考无效日期示例

oppositeboolfalse默认为false, 为true时,无效天和无效日期变成有效天和有效日期

 

你可以参考有效天与有效日期示例

onpickingfunctionnull此四个参数为事件参数

 

你可以参考自定义事件示例

onpickedfunctionnull
onclearingfunctionnull
onclearedfunctionnull