`

My97 WdatePicker 事件控件使用

 
阅读更多

   最近在做项目过成功遇到这样的需求,在使用事件控件选择日期之后,紧接着进行一次查询操作。开始一直纠结在对文本内容改变进行监听,但是有出现了浏览器兼容的问题,好一阵纠结。

  偶然机会想到时间控件是否有日期时间选择完成事件,查找My97 WdatePicker 文档果然,有这样的监听事件;

贴下来供大家参考使用:

    控件地址是:http://www.my97.net/dp/demo/resource/2.5.asp

二. 功能及示例

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="../../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:cMonthFuncychanged: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 属性,你能从这里发现他们的不同之处吗?
    下面是有关这两个属性的描述详见内置函数和属性

分享到:
评论

相关推荐

    WdatePicker日历控件使用方法

    WdatePicker控件能够无视页面上的iframe层级,确保用户在任何情况下都能无障碍地访问和使用日历组件。这极大地提升了用户体验,尤其是在有滚动条或复杂布局的页面上。 2. **民国年日历和其他特殊日历** 通过设置...

    MY97日历控件

    在本文中,我们将深入探讨MY97日历控件的核心特性、安装与使用方法、以及如何进行自定义配置,以帮助开发者更好地理解和应用这一工具。 一、MY97日历控件的核心特性 1. 用户友好:MY97日历控件提供直观的用户界面...

    My97DatePicker时间控件使用

    《My97DatePicker时间控件使用详解》 在网页开发中,时间选择控件是必不可少的一个元素,它为用户提供了方便的时间输入界面。My97 DatePicker是一款广泛应用于Web开发中的JavaScript日期选择插件,以其易用性和强大...

    日期控件My97DatePicker的使用

    在本文中,我们将深入探讨My97DatePicker的使用方法,以及如何在项目中集成和定制这个控件。 1. **安装与引入** My97DatePicker通常以JavaScript文件的形式提供,如在提供的压缩包中`My97DatePicker4.7.2`可能包含...

    my97日期控件

    - **初始化控件**:使用`WdatePicker()`函数对输入框进行绑定,例如`&lt;input id="date" onclick="WdatePicker()" type="text"&gt;`。 - **配置参数**:通过配置对象设置控件的各项属性,如`{lang:'zh-cn',dateFmt:'...

    My97Datepicker日历控件

    My97Datepicker是一款广泛使用的JavaScript日历控件,它为网页开发提供了强大的日期选择功能。这款控件以其丰富的自定义选项、良好的兼容性和高效性能而受到开发者喜爱。在Java开发环境中,My97Datepicker通常与前端...

    my97日历控件

    1. **安装与引入**:在网页项目中使用my97日历控件,首先需要下载对应的压缩包,其中的"My97DatePicker日历插件"包含了所有必要的JavaScript和CSS文件。开发者需要将这些文件引入到HTML页面中,通常将JS文件放在`...

    My97 DatePicker My97日期控件 4.8正式版

    跨无限级框架显示和自动选择显示位置 无论你把日期控件放在哪里,你都不需要担心会被外层的iframe所遮挡进而影响客户体验,My97日期控件是可以跨无限级框架显示的,并且当控件处在页面边界是,它会自动选择显示的位置....

    my97时间控件包

    "my97时间控件包"是一个专门用于处理日期和时间输入的软件组件,它在IT行业中被广泛应用,尤其是在Web开发领域。My97 DatePicker 是一个高效、易用且功能丰富的JavaScript日期选择器,它提供了丰富的自定义选项,...

    my97日历控件跟ie8不兼容 解决方案

    "my97日历控件"是一款广泛使用的JavaScript日期选择插件,它提供了丰富的自定义功能和良好的用户体验。然而,正如标题和描述所指出的,这个控件在Internet Explorer 8(简称IE8)上可能会出现兼容性问题。这个问题...

    jsp页面使用My97DatePicker日历控件就经常出现无法打开站点

    My97DatePicker是一款广泛使用的JavaScript日期选择插件,它为jsp页面提供了一种方便、美观的日期选取方式。然而,在实际应用中,可能会遇到“无法打开站点”的问题,这可能是由多种原因引起的。以下我们将详细探讨...

    My97日历控件

    这个文本文件很可能是关于如何使用JavaScript版本的My97日历控件的详细指南,可能包括配置选项、事件处理、API函数等详细信息。通常,开发者会通过阅读这份文档来了解如何更深入地定制和控制日历控件。 5. **My97...

    My97DatePicker包(WdatePicker.js文件加了详细备注)

    WdatePicker.js 配置文件,在调用的地方仅需使用该文件,可多个共存,以xx_WdatePicker.js方式命名 config.js 语言和皮肤配置文件,无需引入(4.8以后合并入WdatePicker.js) calendar.js 日期库主文件,无需引入 My97...

    My97DatePicker控件使用总结

    My97DatePicker是一款在中国广泛应用的时间控件,尤其在Web开发中,它被广泛用来提供用户友好的日期选择功能。这款控件以其强大的功能、自定义的样式和良好的兼容性著称,使得开发者能够轻松地在网页上添加日期选择...

    My97DatePicker日历控件

    My97DatePicker是一款广泛应用于Web开发中的JavaScript日历控件,它以其强大的功能、高度的自定义性以及良好的用户体验而受到开发者的喜爱。这款控件能够帮助用户在网页上方便地选择日期,提供了多种显示样式和交互...

    My97日期控件

    本文将深入探讨My97日期控件的核心特性、使用方法以及常见应用场景。 My97日期控件(My97 DatePicker)由My97 Development Team开发,自2005年发布以来,历经多次更新迭代,不断优化用户体验,已经成为许多开发者...

    My97日期控件及皮肤

    本文将详细介绍My97日期控件的核心特点、功能、皮肤定制以及使用方法。 一、核心特点 1. 兼容性:My97日期控件支持各种主流浏览器,包括IE6+、Firefox、Chrome、Safari、Opera等,确保了在不同平台上的稳定运行。 2...

    My97DatePicker日期控件使用说明文档及插件

    My97DatePicker是一款广泛应用于Web开发中的日期选择控件,以其高效、易用和高度可定制的特点深受开发者喜爱。这款控件提供了丰富的功能和样式,能够帮助用户在网页上轻松地进行日期输入和选择,极大地提升了用户...

    利用my97datepicker实现日期控件

    My97DatePicker是一款非常流行的JavaScript日期控件,它在网页应用中被广泛使用,提供了丰富的日期选择功能,具有良好的用户体验和高度的自定义性。这款控件由my97.net开发,因此得名my97datepicker。在本文中,我们...

Global site tag (gtag.js) - Google Analytics