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 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都是内置函数 - 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" onfocus="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个时,系统将自动补全
My97 DatePicker使用之自定义事件的更多相关文章
- JS日历插件 - My97 DatePicker用法详解
一.简介 1. 注意事项 (1)My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名: (2)各目录及文件的用途: WdatePicker.js 配 ...
- My97 DatePicker图标触发
My97 DatePicker图标触发 1.设计源码 <%@ page language="java" import="java.util.*" page ...
- My97 DatePicker普通调用
My97 DatePicker普通调用 1.设计源码 <%@ page language="java" import="java.util.*" page ...
- 谈谈JS的观察者模式(自定义事件)
呼呼...前不久参加了一个笔试,里面有一到JS编程题,当时看着题目就蒙圈...后来研究了一下,原来就是所谓的观察者模式.就记下来...^_^ 题目 [附加题] 请实现下面的自定义事件 Event 对象 ...
- Javascript之自定义事件
Javascript自定义事件,其本质就是观察者模式(又称订阅/发布模式),它的好处就是将绑定事件和触发事件相互隔离开,并且可以动态的添加.删除事件. 下面通过实例,一步一步构建一个具体的Javasc ...
- MUI APP关于页面之间的传值,plusready和自定义事件
最近在用MUI开发这个APP,发现有时候这个plusready不起作用,表现在,这个页面如果重复打开,这个plusready就进不去,然后上一个页面传过来的值,就没法接收了.这个经过MUI官方确认,是 ...
- 跟着《beginning jquery》学写slider插件并借助自定义事件改进它
<beginning jquery>是一本很不错的学习jquery的书,作者的讲解深入浅出,很适合初学者,在最后一章里面,作者把前面所有的点结合起来完成了一个轮播图的jquery插件.实现 ...
- cocos2d-x3.x自定义事件
-- 自定义事件 -- 监听: local eventDispatcher = self:getEventDispatcher();--self为继承Node的对象 local function ha ...
- HotApp小程序统计之自定义事件统计
什么是自定义事件统计 官网:https://weixin.hotapp.cn/document 自定事件,就是自定统计任意事件的执行,灵活度最高. 用上图的云笔记说明想知道如下信息 (1)多少 ...
随机推荐
- 浏览器页面区域大小的js获取方法
浏览器页面区域大小的获取: /在IE.FireFox.Opera下都可以使用 document.body.clientWidth document.body.clientHeight //即可 ...
- 考研路之C语言
今天在学习C的时候,又学到了一些新的内容,所以赶紧记录下来. case 1: #include <stdio.h> union exa{ struct{ int a; int b; }ou ...
- 【Java Web】Eclipse中配置Marven环境
1 Marven简介 Apache Maven,是一个软件(特别是Java软件)项目管理及自动构建工具,由Apache软件基金会所提供.基于项目对象模型(缩写:POM)概念,Maven利用一个中央信 ...
- stm32之ADC学习
1.stm32中采用的是逐次逼近型模拟数字方式,那么什么是逐次逼近呢? 逐次逼近的方式类似于二分法,以8位数据为例:当输入一个模拟量的时候,首先取这8位数的一半,即1000 0000,与模拟量比较,大 ...
- android studio如何开启与禁用版本控制vcs
1.开启
- 制作滚动视图(ScrollView)
怎样判断是否应当使用滚动视图 所谓的滚动视图,是指一个可以滑动的视窗,视窗大小和位置固定不变,视窗内的内容用户可以通过手指滑动或者拖动滚动天来进行滚动浏览. 滚动视图的目的是为了解决同类内容过多,一个 ...
- NBTSTAT命令详解
1. 具体功能 该命令用于显示本地计算机和远程计算机的基于 TCP/IP(NetBT) 协议的 NetBIOS 统计资料. NetBIOS 名称表和 NetBIOS 名称缓存. NBTSTAT ...
- Xcode和github入门详细教程
Xcode和github详细教程! 主要是参考了现在网上的一些资料给没整过的人一个详细的指南. (1)先在github上注册账号,自行解决! (2)在导航栏右上角new一个repository(仓库) ...
- asp.net web api 开发时应当注意的事项
Self referencing when returning chain of objects. This can be solved using a design pattern called t ...
- 解决position:relative情况下,z-index无效的方法
在实际开发中,div+css经常会碰到层级的问题 其中有个很头痛的就是z-index控制层级时,老是发现z-index不起作用 老杨依据自己的经验,总结出以下步骤: 1.判断被覆盖的层(想要置顶的层) ...