dwz 日期空间onchange事件

在选择时间后，不仅要给当前时间控件的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"

οnchange="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}"/>

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);

}

dwz 日期空间onchange事件相关推荐

layui 日期插件onchange事件失效的方法
laydate.render({elem:'#text1',//制定元素type:'date',//range:true,//开启左右面板min:'2017-09-1',//max:'2017-10- ...
WdatePicker 日历控件的onchange事件无作用
2019独角兽企业重金招聘Python工程师标准>>> 来源:https://blog.csdn.net/gaoxiong335/article/details/70146664 在 ...
如何手动触发onchange事件？ [重复]
本文翻译自:How can I trigger an onchange event manually? [duplicate] This question already has an answer ...
js手动触发这个 onchange 事件
input type=txt 这个组件触发change事件,需要同时满足两个条件: 获得焦点: 值发生改变: 注:select这类组件只要值改变即可触发change事件: 下面介绍一个实际例子:在一个 ...
select的onChange事件问题解决
select的onChange事件问题解决 (onchange.onfocus.onclick.onmousedown) 一.onChange事件只有在值改变时才可触发,所以必须在每一次选择时(尤其第 ...
input js 离开事件_js控制input执行onchange事件
js给textbox赋值触发onchange事件的方法 js中onchange事件是在客户端改变输入控件的值,比如一个textbox,会出发的一个事件.但是如果在js代码中改变一个textbox的va ...
onchange事件只生效一次的问题
今天遇到一个file表单元素,对onchange事件的响应问题,发现仅响应一次,网上查到解决方法,在这里转载一下文件选择框的onchange事件只在第一次改变时生效,以后再选择文件不会触发oncha ...
onmouseout事件与onchange事件分析
今天修改Bug,新到期时间为:原到期时间+续卡时间而不是当前日期+续卡时间.在修改的过程中发现一个Bug.那就是续卡时间数值框我输入新数值A之后,点击窗体空白处,新到期时间并没有修改过来, 再次点 ...
JS改变input的value值不触发onchange事件解决方案（转）
JS改变input的value值不触发onchange事件解决方案 (转) 参考文章: (1)JS改变input的value值不触发onchange事件解决方案 (转) (2)https://www. ...

dwz 日期空间onchange事件

dwz 日期空间onchange事件相关推荐

最新文章

热门文章