參考網站：http://www.my97.net/dp/demo/resource/2.5.asp
- 自定義事件
如果你需要做一些附加的操作,你也不必擔心,日期控件自帶的自定義事件可以滿足你的需求.此外,你還可以在自定義事件中調用提供的API庫來做更多的運算和擴展,絕對可以通過很少的代碼滿足你及其個性化的需求.
注意下面幾個重要的指針,將對你的編程帶來很多便利 this: 指向文本框 dp: 指向$dp dp.cal: 指向日期控件對象 注意:函數原型必須使用類似 function(dp){} 的模式,這樣子,在函數內部才可以使用dp - onpicking 和 onpicked 事件
示例5-2-1 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的用法了嘛? 詳見內置函數和屬性示例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.getElementById示例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 onclick="WdatePicker({el:'d523',dateFmt:'yyyy-MM-dd HH:mm:ss',onpicked:pickedFunc})" src="../../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 事件
示例5-3-1 使用onclearing事件取消清空操作
<input type="text" class="Wdate" id="d531" onFocus="WdatePicker({onclearing:function(){if(!confirm('日期框的值為:'+this.value+', 確實要清空嗎?'))return true;}})"/>
注意:當onclearing函數返回true時,系統的清空事件將被取消, 函數體里面沒有引用$dp,所以函數原型里面可以省略參數dp示例5-3-2 使用cal對象取得當前日期所選擇的月份(使用了 dp.cal)
<input type="text" class="Wdate" id="d532" onFocus="WdatePicker({oncleared:function(dp){alert('當前日期所選擇的月份為:'+dp.cal.date.M);}})"/>
示例5-3-3 綜合使用兩個事件
<script> function d533_focus(element){ var clearingFunc = function(){ if(!confirm('日期框的值為:'+this.value+', 確實要清空嗎?')) return true; } var clearedFunc = function(){ alert('日期框已被清空'); } WdatePicker({el:element,onclearing:clearingFunc,oncleared:clearedFunc}) } </script> <input type="text" class="Wdate" id="d533" onFocus="d533_focus(this)"/> - 年月日時分秒的 changing和changed
年月日時分秒都有對應的changing和changed事件,分別是: ychanging ychanged Mchanging Mchanged dchanging dchanged Hchanging Hchanged mchanging mchanged schanging schanged
示例5-4-1 年月日改變時彈出信息
<input type="text" class="Wdate" onFocus="WdatePicker({dchanging:cDayFunc, Mchanging:cMonthFunc, ychanging:cYearFunc, dchanged:cDayFunc, Mchanged:cMonthFunc, ychanged:cYearFunc})"/> <script> function cDayFunc(){ cFunc('d'); } function cMonthFunc(){ cFunc('M'); } function cYearFunc(){ cFunc('y'); } function cFunc(who){ var str,p,c = $dp.cal; if(who=='y'){ str='年份'; p='y'; } else if(who=='M'){ str='月份'; p='M'; } else if(who=='d'){ str='日期'; p='d'; } alert(str+'發生改變了!\n$dp.cal.date.'+p+'='+c.date[p]+'\n$dp.cal.newdate.'+p+'='+c.newdate[p]); } < /script>
這個例子用到了 $dp.cal.date 和 $dp.cal.newdate 屬性,你能從這里發現他們的不同之處嗎? 下面是有關這兩個屬性的描述詳見內置函數和屬性6. 快速選擇功能
此功能允許指定5個最常用的日期,可以方便用戶選擇,如果不指定,系統將自動生成 相關屬性: qsEnabled 是否啟用快速選擇功能, 注意:如果日期格式里不包含 d(天) 這個元素時,快速選擇將一直顯示,不收此屬性控制 quickSel 快速選擇數據,可以傳入5個快速選擇日期,日期格式同min/maxDate
注意: 日期格式必須與 realDateFmt realTimeFmt 相匹配 除了使用靜態的日期值以外,還可以使用動態參數(如:%y,%M分別表示當前年和月)示例6-1 傳入2個靜態日期
<input class="Wdate" type="text" onfocus="WdatePicker({dateFmt:'yyyy年MM月dd日',qsEnabled:true,quickSel:['2000-1-10','2000-2-20']})"/>
注意:當傳入的數據不足5個時,系統將自動補全示例6-2 傳入2個動態日期,1個靜態日期
<input type="text" class="Wdate" onFocus="WdatePicker({dateFmt:'yyyy年MM月dd日',qsEnabled:true,quickSel:['2000-10-01','%y-%M-01','%y-%M-%ld']})"/>
注意:當傳入的數據不足5個時,系統將自動補全