WDatePicker 屏蔽onchange事件的解决办法

时间：2023-03-08 15:34:11

受下面文章的启发，使用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 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都是内置函数

  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官网

相关文章