jQuery UI datepicker选择日期后,日期层会再次加载
在项目中,一同事使用jQuery UI的datepicker日期控件时,出现以下问题:
1、在IE浏览器下,选择好日期后,datepicker的日期显示会重新加载;
2、在Firefox浏览器下,选择好日期后,datepicker的日期显示不会重新加载,可是想再次修改日期时,焦点必须离开输入的日期框后,再点击进入才能出现datepicker的日期选择框。
针对上述出现的问题,我对jQuery UI 1.8.15版本的源码进行了查看,发现jquery.ui.datepicker是由focus事情来显示日期选择层的,经检查代码发现_selectDate方法中默认的选择日期是选择日期赋值给输入框后,再重新对输入框设定focus。这样在IE浏览器下就会出现日期选择框重新加载了。
问题代码出现在jquery.ui.datepicker.js文件的909到930行,其具体如下:
/* Update the input field with the selected date. */_selectDate: function(id, dateStr) {var target = $(id);var inst = this._getInst(target[0]);dateStr = (dateStr != null ? dateStr : this._formatDate(inst));if (inst.input)inst.input.val(dateStr);this._updateAlternate(inst);var onSelect = this._get(inst, 'onSelect');if (onSelect)onSelect.apply((inst.input ? inst.input[0] : null), [dateStr, inst]); // trigger custom callbackelse if (inst.input)inst.input.trigger('change'); // fire the change eventif (inst.inline)this._updateDatepicker(inst);else {this._hideDatepicker();this._lastInput = inst.input[0];inst.input.focus(); // restore focusthis._lastInput = null;}},