WdatePicker自定义事件(日历控件)
来源:互联网 发布:电视软件安装 编辑:程序博客网 时间:2024/05/22 21:25
功能及示例
5. 自定义事件
- 自定义事件
如果你需要做一些附加的操作,你也不必担心,日期控件自带的自定义事件可以满足你的需求.此外,你还可以在自定义事件中调用提供的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 属性,你能从这里发现他们的不同之处吗?
下面是有关这两个属性的描述详见内置函数和属性
- WdatePicker自定义事件(日历控件)
- WdatePicker 日历控件的onchange事件屏蔽
- WdatePicker日历控件使用方法
- WdatePicker日历控件使用方法
- WdatePicker日历控件使用方法
- WdatePicker日历控件使用方法
- WdatePicker日历控件使用方法
- WdatePicker日历控件使用方法
- WdatePicker 日历控件
- WdatePicker日历控件使用方法
- WdatePicker日历控件使用方法
- WdatePicker日历控件使用方法
- WdatePicker日历控件使用方法
- WdatePicker日历控件使用方法
- WdatePicker日历控件使用方法
- WdatePicker日历控件
- WdatePicker日历控件使用方法
- WdatePicker日历控件使用方法
- 手机触屏判断
- 5分钟无操作,退出,操作方法,关闭页面
- SQL Server DATEDIFF() 函数(SQL计算时间差)
- Greenplum性能调试记录
- Sql server 事务的两种用法
- WdatePicker自定义事件(日历控件)
- 正则表达式相关
- .NET分页+组合查询。一次读一页
- jQuery AJAX实现调用页面后台方法。调用ashx方法
- Java总结系列之与运行环境交互及常用工具类
- 时间差(类.精确到秒).net中实现Datediff类C#
- 光纤光猫连接自己路由器的设定
- FCK 相关函数
- The Setup of C