在项目中,一同事使用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 callback
else if (inst.input)
inst.input.trigger('change'); // fire the change event
if (inst.inline)
this._updateDatepicker(inst);
else {
this._hideDatepicker();
this._lastInput = inst.input[0];
inst.input.focus(); // restore focus
this._lastInput = null;
}
},
将上面“
inst.input.focus(); // restore focus”的代码注释掉后,进行测试。发现上述出现的两个问题都能解决,因此决定修改jQuery UI的代码。
通过代码研究发现,上述遇到的问题,应该也可以通过自定义onSelect方法来实现。只是简单试了下,效果没达到,所以就冒险对jQuery UI的代码进行修改了。
项目中引用的jQuery UI是min的js文件,也就是jQuery UI团队发布的,经过压缩后的文件。该文件和源码存在很大差别。主要区别有:
1、源码文件是分plugin来定义单个js文件的;
2、jquery-ui-1.8.15.custom.min.js文件是将所有发布的ui,集成在一个文件里;
3、jquery-ui-1.8.15.custom.min.js文件的代码经过了压缩。
不过还好,jquery-ui-1.8.15.custom.min.js文件的压缩主要是针对定义的变量进行的。经datepicker、_selectDate和focus()一路查找下来。终于找到了
a.input.focus();这句代码。将其删除后,测试后达到了解决效果。
分享到:
相关推荐
jquery.ui 的 datepicker 默认是年月日的jquery 插件,如果添加时分秒 只需要做如下修改即可 1. 下载jquery-ui-timepicker-addon.js ,并在页面加载 2. 页面添加如下 timepicker 的样式即可 复制代码 代码如下:.ui-...
其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用,以及各种常用的jQuery插件的使用方法和技巧,所有这些知识点都配有完整的示例(包括...
简洁实用jquery日期选择插件之jQuery datePicker下载 8)图片展示 1.2款jQuery图片自动切换常用广告代码 2.jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 3.jQuery+CSS实用图片收缩与放大效果插件 ...
这是一个适合移动设备WEB应用的日期和时间拾取器,在桌面版的日期拾取器我们一般用jQuery UI的datepicker插件,而移动手机版的日期拾取器则可以根据项目需求选择与jQuery Mobile配合的mobiscroll.js插件,它提供了...
│ My97DatePicker 日期插件 │ Validform 表单验证插件 │ zepto zepto库 │ ueditor 百度编辑器 │ Highcharts 图表插件 │ dataTables 表格排序,检索插件 │ WebUploader 百度文件上传...
│ My97DatePicker 日期插件 │ Validform 表单验证插件 │ zepto zepto库 │ ueditor 百度编辑器 │ Highcharts 图表插件 │ dataTables 表格排序,检索插件 │ WebUploader 百度文件上传组件 │ lightbox2 ...
jquery.ui.datepicker.js:日期控件 jquery.ad-gallery.js:相册 jquery.uploadify-3.1.js:多文件(图片)上传 kindeditor编辑器 kindeditor编辑器在mvc3中的应用,主要是文件(图片)上传部分的改造 ...
jquery.ui.datepicker.js:日期控件 jquery.ad-gallery.js:相册 jquery.uploadify-3.1.js:多文件(图片)上传 kindeditor编辑器 kindeditor编辑器在mvc3中的应用,主要是文件(图片)上传部分的改造 ...
jquery.ui.datepicker.js:日期控件 jquery.ad-gallery.js:相册 jquery.uploadify-3.1.js:多文件(图片)上传 kindeditor编辑器 kindeditor编辑器在mvc3中的应用,主要是文件(图片)上传部分的改造 ...
jquery.ui.datepicker.js:日期控件 jquery.ad-gallery.js:相册 jquery.uploadify-3.1.js:多文件(图片)上传 kindeditor编辑器 kindeditor编辑器在mvc3中的应用,主要是文件(图片)上传部分的改造 ...
jquery.ui.datepicker.js:日期控件 jquery.ad-gallery.js:相册 jquery.uploadify-3.1.js:多文件(图片)上传 kindeditor编辑器 kindeditor编辑器在mvc3中的应用,主要是文件(图片)上传部分的改造 ...
使用jQuery UI的自定义datepicker(带有备用) “当场”验证 本土化 更新: 13年2月26日 更新grunt到0.4.0并解决对齐问题CSS 影片: 常问问题: 帮助: 帮助将理想形式本地化为其他语言。 目录: 设置: 加载 ...
-修正了使用IFrame的Window关闭后不能再次打开的BUG(feedback:alexa99)。 -修正了IE下Grid中的一个JS问题(feedback:lqm4108)。 -修正Alert消息中引号未编码导致的JS错误(feedback:sun1299shine)。 +集成extjs...
-修正了使用IFrame的Window关闭后不能再次打开的BUG(feedback:alexa99)。 -修正了IE下Grid中的一个JS问题(feedback:lqm4108)。 -修正Alert消息中引号未编码导致的JS错误(feedback:sun1299shine)。 +集成extjs...