天天看點
傳回

WDatePicker 屏蔽onchange事件的解決辦法

受下面文章的啟發，使用DatePicker自帶的年月日相關的change事件，可以“勉強”實作input控件的onchange(),直接上代碼：

1、第一種方式：利用DatePicker提供的年、月、日、時、分、秒 changing和changed事件，缺點是有時必須每個事件都列出來，且點“今天”、“确定”等按鈕是不響應的，代碼如下： 

$startTime.on("focus",function(){ WdatePicker({

　　dateFmt:'yyyy-MM-dd',

　　dchanged: function(dp){ setDatePickerValue( dp.cal.getNewDateStr(), $endTime,timeType);} ,

　　Mchanged: function(dp){ setDatePickerValue( dp.cal.getNewDateStr(), $endTime,timeType);} ,

　　ychanged: function(dp){ setDatePickerValue( dp.cal.getNewDateStr(), $endTime,timeType);}

　　});

});

2、第二種方式：利用DataPicker提供的onpicking和onpicked事件，該事件能響應該控件的所有選擇操作，當然就包括“今天”按鈕，但是“清空”按鈕不會響應，它有自己的事件onclearing和oncleared，所有推薦使用這種方式來做change;

　　$startTime.bind("focus", function () {

　　　　　　WdatePicker({

　　　　　　　　　　dateFmt: 'yyyy-MM-dd',

　　　　　　　　　　maxDate: getShortDate(),

　　　　　　　　　　minDate: '2006-01-01',

　　　　　　　　　　onpicking: function (dp) {if (dp.cal.getDateStr() != dp.cal.getNewDateStr()) { setDatePickerValue(dp, $startTime, $endTime, 　　　　　　　　　　　　　　　　　　　　　　　　"start_click", timeType); }}

　　　　　　});

　　});

function setDatePickerValue(newDate,$endTime,timeType)

{

　　if(timeType=="day")

　　{

　　　　var startTime=new Date(newDate);

　　　　var endTime=new Date(startTime.getTime()+1*24*60*60*1000);

　　　　$endTime.val(endTime.getFullYear() + "-" + (endTime.getMonth() + 1) + "-" + endTime.getDate());

　　}

　　if(timeType=="month")

　　{

　　　　var startTime=new Date(newDate);

　　　　var smonth=startTime.getMonth+1;

　　　　var m;

　　　　if(smonth==1||smonth==3||smonth==5||smonth==7||smonth==8||smonth==10||smonth==12)

　　　　{

　　　　　　m=startTime.getTime()+31*24*60*60*1000;

　　　　}

　　　　else{

　　　　　　m=startTime.getTime()+30*24*60*60*1000;

　　　　}

　　var endTime=new Date(m);

　　$endTime.val(endTime.getFullYear() + "-" + (endTime.getMonth() + 1));

}

  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 将選擇的值拆分到文本框

    年 月 日 時 分 秒 
    WDatePicker 屏蔽onchange事件的解決辦法

    <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都是内置函數

  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 屬性,你能從這裡發現他們的不同之處嗎?

    下面是有關這兩個屬性的描述詳見内置函數和屬性

    注：以上内容來自My97 Datapicker官網

轉載于:https://www.cnblogs.com/wan-feng/p/3473439.html

上一篇: Android6.0以上權限擷取權限的問題
下一篇: OCM考試實驗-Skillset1----Undo &amp; Shared Server