转自: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 将选择的值拆分到文本框
年 月 日 时 分 秒
<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 事件 语言配置
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 | 可以使用此功能禁用所指定的一个或多个日期 你可以参考无效日期示例 |
opposite | bool | false | 默认为false, 为true时,无效天和无效日期变成有效天和有效日期 你可以参考有效天与有效日期示例 |
onpicking | function | null | 此四个参数为事件参数 你可以参考自定义事件示例 |
onpicked | function | null | |
onclearing | function | null | |
oncleared | function | null |