dwz 日期空间onchange事件

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" 

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

    }