My97 DatePicker使用之自定义事件

参考网站：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 οnclick="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" οnfοcus="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个时,系统将自动补全