dwz 时间控件 onchange方法
来源:互联网 发布:uml 数据库建模 编辑:程序博客网 时间:2024/05/29 04:55
今天做前台的时候,用dwz的时间控件
需要实现:
在选择时间后,不仅要给当前时间控件的input的输入框赋值,同时还要给另外的一个页面的隐藏域input赋值
解决思路:
在时间控件的input选择赋值后,触发该input的onchange方法,但是发现并未触发,上网上搜了下,发现:
当一个HTML元素的属性改变的时候,都能通过onpropertychange来捕获。例如< input name="text1" id="text1" />对象的value属性被页面的脚本修改的时候,onchange无法捕获到,而onpropertychange却能够捕获。
具体理解为:onpropertychange能及时捕获属性值的变化,而onchange在属性值改变时只有通过鼠标执行某些操作才能激活该事件!
但onpropertychange只有IE支持,FireFox下的怎么解决呢?firefox的事件oninput,效果和IE的onproperchange相同。
(摘自:http://blog.csdn.net/gavin_ku/article/details/2303459)
由于是时间控件直接改变的input的value值,因此无法触发onchange方法,
于是,想到扩展dwz的时间控件,如下:
1.给时间控件加上另外一个属性openChange,并在页面上将该属性至为true
代码:
<input type="text" name="openDate1" class="date" dateFmt="yyyy-MM-dd" readonly="true" style="float:left"
onchange="onchangeValue(this);" 注:onchangeValue(this)是要触发的方法
openChange="true" 注:将openChange定义两个参数:true和false,true为执行onchange方法
minDate="{%y-10}-%M-%d"
maxDate="{%y}-%M-{%d}"
minDate="{%y-10}-%M" maxDate="{%y+10}-%M"
minDate="{%y-10}" maxDate="{%y+10}"/>
<a class="inputDateButton" href="javascript:;">选择</a>
2.在dwz.ui.js找到调用fn.datepicker的地方,并添加if ($this.attr("openChange")) opts.openChange = $this.attr("openChange");
代码:
if ($.fn.datepicker){
$('input.date', $p).each(function(){
var $this = $(this);
var opts = {};
if ($this.attr("dateFmt")) opts.pattern = $this.attr("dateFmt");
if ($this.attr("minDate")) opts.minDate = $this.attr("minDate");
if ($this.attr("maxDate")) opts.maxDate = $this.attr("maxDate");
if ($this.attr("mmStep")) opts.mmStep = $this.attr("mmStep");
if ($this.attr("ssStep")) opts.ssStep = $this.attr("ssStep");
if ($this.attr("openChange")) opts.openChange = $this.attr("openChange");注:添加这句
$this.datepicker(opts);
});
}
3.在dwz.datepicker.js中找到return this.each(function(),如下修改:
代码:
return this.each(function(){
var $this = $(this);
var dp = new Datepicker($this.val(), opts);
var openChange=dp.get('openChange');注:添加这句,获取openchange值
.....
.....
function closeCalendar() {
$(setting.box$).remove();
if(openChange=='true'){ 注:添加这三句
$this.triggerHandler('change');
}
$(document).unbind("click", closeCalendar);
}
......
......
4.在dwz.datepicker.js中找到var Datepicker = function(sDate, opts)如下修改:
代码:
var Datepicker = function(sDate, opts) {
this.opts = $.extend({
pattern:'yyyy-MM-dd',
minDate:"1900-01-01",
maxDate:"2099-12-31",
mmStep:1,
ssStep:1,
openChange:false 注:给Datepicker 对象定义openChange,并默认为false
}, opts);
OK,思路就是在时间控件上加一个openChange值,当该值为true的时候,在选择完时间,触发closeCalendar()的时候,激活该input的change方法,
测试代码:
//将值传递给主页面
function onchangeValue(obj){
var name=obj.name;
var value=obj.value;
alert(value);
$('#pagerForm').find('input[name='+name+']').val(value);
}
测试结果:
转载:http://hi.baidu.com/syq17496152/item/a2e5091c4d15a56a70d5e836
- dwz 时间控件 onchange方法
- dwz监听日期变化,dwz日期控件onchange不起作用,dwz框架时间控件不支持onchange事件
- dwz框架 时间控件不支持onclick,onchange事件
- dwz 日期控件onchange不起作用,解决方法
- dwz 日期空间onchange事件
- select onchange 赋值方法
- select控件的OnChange事件
- dwz日期控件日期控制
- jqueryeasyui 事件方法onChange(),onSelect()
- select onchange方法传值
- onchange
- onChange
- onchange
- thinkphp dwz 方法 前置 后置
- Web 控件 DropDownList 在javascript 的 onchange
- select控件onchange事件的兼容性问题
- 日历控件My97DatePicker使用--onchange不生效
- WdatePicker 日历控件的onchange事件屏蔽
- 音乐播放器乱码
- HOG基本概念
- PJSIP2.0使用以及交叉编译存在问题解决
- 7周项目3
- 网络管理功能
- dwz 时间控件 onchange方法
- IE兼容模式下面,js中的json字符串不能有多余的逗号
- 将博客搬至CSDN
- Android之ActionBar学习
- ios中的各中动画(旋转,平移)
- Device Compatibility(设备兼容性)
- Linux下移植pjsip,使用QT开发
- 利用session实现简单的购物
- System Permissions(系统权限)