¶þ. ¹¦Äܼ°Ê¾Àý

5. ×Ô¶¨Òåʼþ

1. ×Ô¶¨Òåʼþ

   Èç¹ûÄãÐèÒª×öһЩ¸½¼ÓµÄ²Ù×÷,ÄãÒ²²»±Øµ£ÐÄ,ÈÕÆڿؼþ×Ô´øµÄ×Ô¶¨Òåʼþ¿ÉÒÔÂú×ãÄãµÄÐèÇó.´ËÍâ,Ä㻹¿ÉÒÔÔÚ×Ô¶¨ÒåʼþÖе÷ÓÃÌṩµÄAPI¿âÀ´×ö¸ü¶àµÄÔËËãºÍÀ©Õ¹,¾ø¶Ô¿ÉÒÔͨ¹ýºÜÉٵĴúÂëÂú×ãÄã¼°Æä¸öÐÔ»¯µÄÐèÇó.
   
   ×¢ÒâÏÂÃ漸¸öÖØÒªµÄÖ¸Õë,½«¶ÔÄãµÄ±à³Ì´øÀ´ºÜ¶à±ãÀû
   this: Ö¸ÏòÎı¾¿ò
   dp: Ö¸Ïò$dp
   dp.cal: Ö¸ÏòÈÕÆڿؼþ¶ÔÏó
   ×¢Òâ:º¯ÊýÔ­ÐͱØÐëʹÓÃÀàËÆ function(dp){} µÄģʽ,ÕâÑù×Ó,ÔÚº¯ÊýÄÚ²¿²Å¿ÉÒÔʹÓÃdp

2. 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="../../../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¶¼ÊÇÄÚÖú¯Êý

3. 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)"/>

4. ÄêÔÂÈÕʱ·ÖÃëµÄ 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 ÊôÐÔ,ÄãÄÜ´ÓÕâÀï·¢ÏÖËûÃǵIJ»Í¬Ö®´¦Âð?
   ÏÂÃæÊÇÓйØÕâÁ½¸öÊôÐÔµÄÃèÊöÏê¼ûÄÚÖú¯ÊýºÍÊôÐÔ

   
   

6. ¿ìËÙÑ¡Ôñ¹¦ÄÜ

Èý. ÅäÖÃ˵Ã÷

ËÄ. ÈçºÎʹÓÃ