My97 DatePicker

最新推荐文章于 2025-06-21 16:56:28 发布

最新推荐文章于 2025-06-21 16:56:28 发布 · 183 阅读

文章标签：

#F#

jsp_html 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一款强大的日期时间控件My97的多种实用功能，包括日期选择联动、弹出确认对话框、时间及日期范围选择等，并提供了具体的实现代码示例。

很强的一款日期时间控件.下载包www.my97.com

1.两个日期的选择联动.(后一个日期值要大于或等于前一个日期值)

<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.$D()是一个内置函数,相当于document.getElementById.

2.onpicking事件,弹出确认框,显得很正式.

<input type="text" id="5421" onFocus="WdatePicker({onpicking:function(dp){if(!confirm('日期框原来的值为: '+dp.cal.getDateStr()+', 要用新选择的值:' + dp.cal.getNewDateStr() + '覆盖吗?')) return true;}})" class="Wdate"/>

注意:你注意到dp.cal.getDateStr和dp.cal.getNewDateStr的用法

3.时间选择框

<input name="yieldDate" type="text" size="25" readonly>
<img onclick="WdatePicker({el:'yieldDate',dateFmt:'HH:mm:ss'})" src="../../components/datepicker/skin/datePicker.gif" width="16" height="22" align="absmiddle">

4.日期和时间选择框

<input name="yieldDate" type="text" size="25" readonly>
<img onclick="WdatePicker({el:'yieldDate',dateFmt:'yyyy:MM:dd HH:mm:ss'})" src="../../components/datepicker/skin/datePicker.gif" width="16" height="22" align="absmiddle">

5.选择时间小于某时

<img onclick="WdatePicker({el:'yieldDate',dateFmt:'yyyy-MM-dd',maxDate:'#F{$dp.$D(\'enrolDate\')||\'%y-%M-%d\'}'})" src="../../components/datepicker/skin/datePicker.gif" width="16" height="22" align="absmiddle">

'%y-%M-%d'为当前日期.

6.选择日期范围

<img onclick="WdatePicker({el:'enrolDate',dateFmt:'yyyy-MM-dd',maxDate:'%y-%M-%d',minDate:'#F{$dp.$D(\'yieldDate\')}'})" src="../../components/datepicker/skin/datePicker.gif" width="16" height="22" align="absmiddle">