`
youngxu
  • 浏览: 165358 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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 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();这句代码。将其删除后,测试后达到了解决效果。
3
0
分享到:
评论

相关推荐

    jquery ui利用datepicker插件实现日期控件

    这段代码会在页面加载完成后,将ID为`datePicker`的输入框转换为Datepicker控件。 四、Datepicker配置选项 Datepicker提供了丰富的配置选项,允许开发者定制其行为和外观。例如,你可以设置默认日期、禁用特定日期...

    jQuery时间选择器datepicker年月日时分秒选择

    其中,jQuery UI是jQuery的一个扩展库,提供了一系列可交互的用户界面组件,其中包括我们今天要讨论的"日期选择器"——jQuery UI Datepicker。这个插件允许用户方便地选择日期,甚至可以扩展到选择时间,实现年月日...

    jqueryui中插件Datepicker控件的使用

    **Datepicker** 是 jQuery UI 提供的一个非常实用的日期选择插件,它可以帮助开发者轻松地在网页上添加日期选择功能。要使用 Datepicker,首先需要确保页面已经加载了 jQuery 和 jQuery UI 的相关文件。 1. **引入...

    jQuery ui-datepicker最好用的日历控件

    **jQuery UI Datepicker是最受欢迎的JavaScript日历插件之一,尤其在jQuery库的广泛使用下,它成为开发人员实现日期选择功能的首选工具。本文将深入探讨Datepicker控件的关键特性、使用方法以及如何与其他技术如Java...

    日期选择器:jquery datepicker的使用

    日期选择器在网页开发中是常见的一种交互组件,它能够帮助用户方便地选取日期,而jQuery UI中的datepicker组件就是这样一个强大的工具。本文将详细介绍如何在项目中使用jQuery UI的datepicker,以及它的一些主要功能...

    jQuery-datepicker

    总的来说,jQuery-datepicker是一个强大而灵活的日期选择解决方案,它通过jQuery UI库提供,能够轻松集成到任何Web应用中,帮助提升用户体验,同时提供丰富的定制选项以满足不同需求。通过学习和实践,开发者可以...

    ASP.NET jquery datepicker的使用

    jQuery是JavaScript库,它提供了丰富的功能,包括方便的用户界面组件,如日期选择器(datepicker)。在本教程中,我们将深入探讨如何在ASP.NET中集成和使用jQuery的datepicker。 ### 1. jQuery UI和jQuery ...

    基于jquery datepicker的日期控件

    在网页开发中,jQuery UI 的 Datepicker 是一个非常流行的日期选择控件,它为用户提供了一个友好、可定制的界面来选择日期。这个控件广泛应用于各种网页应用中,如在线预订系统、表单验证以及时间相关的数据输入。...

    DatePicker - jQuery 的日期选择控件

    《DatePicker - jQuery 日期选择控件深度解析》 在网页开发中,用户界面的交互性是提升用户体验的关键因素之一。日期选择控件是常见的UI组件,它为用户提供了一个方便的方式来输入或选择日期,广泛应用于表单填写、...

    jquery datepicker 小例子

    jQuery UI中的`datepicker`是一个非常流行的JavaScript组件,用于在网页上添加日历选择功能。它提供了丰富的自定义选项,使得日期选择器可以适应各种界面设计和功能需求。在这个"jquery datepicker 小例子"中,我们...

    jquery - datePicker

    `jQuery datePicker` 是一个非常流行且实用的JavaScript插件,主要用于在网页中添加日期选择功能。它以其简洁的API和丰富的自定义选项深受前端开发者的喜爱。在这个主题中,我们将深入探讨`jQuery datePicker`的基本...

    jQuery UI组件 jQuery UI

    7. **Datepicker(日期选择器)**:提供一个简洁的日期选择界面,支持多种格式化和日期范围限制,常用于表单输入日期。 8. **Colorpicker(颜色选择器)**:为用户提供一个颜色选择面板,方便在网页中选择颜色,...

    JQuery UI 中文帮助文档

    - **DATEPICKER(日期选择器)**: 为输入字段添加日历选择功能,支持多种格式设置,方便用户选择日期。 - **DRAGGABLE(可拖动)& RESIZABLE(可调整大小)**: 提供元素拖动和大小调整的功能,适用于创建可交互的...

    一款jquery datepicker日期选择器包含多种类型.zip

    【标题】"一款jquery datepicker日期选择器包含多种类型.zip" 涉及的主要知识点是JavaScript库jQuery UI中的DatePicker组件,这是一个广泛应用于网页开发中的日期选择工具。jQuery UI是jQuery库的一个扩展,提供了...

    jquery-ui.css、jquery-ui.js下载

    jQuery UI是基于JavaScript库jQuery的一个扩展,它提供了一系列丰富的用户界面组件,包括但不限于对话框(Dialogs)、日期选择器(Datepickers)、拖放功能(Drag and Drop)、排序功能(Sortable)以及各种可自定义...

    JQuery时间datepicker控件

    在Web开发中,用户界面的交互性和用户体验至关重要,而日期选择器(DatePicker)作为常见的交互元素,被广泛应用于表单填写、日程管理等场景。jQuery时间日期picker控件是一款高效且易于使用的JavaScript插件,它...

    jQuery UI系列教程之二:datepicker.pdf

    这段代码会在页面加载完成后,为 ID 为 "datepicker" 的输入框添加日期选择功能。当用户点击该输入框时,会弹出一个日期选择器。 然而,默认情况下,日期选择器的显示语言为英文。如果需要显示中文,可以引入相应的...

    jQueryUI DatePicker 添加时分秒

    然而,DatePicker 默认只支持日期选择,不包括时间的选择。但通过扩展插件,我们可以很容易地将时分秒添加到 DatePicker 中。 1. **添加时间选择插件** 要在 jQueryUI DatePicker 中添加时分秒,首先你需要下载 `...

    Jquery Ui 后台模板界面

    jQuery UI 包含了多种功能强大的组件,如对话框(Dialog)、日期选择器(Datepicker)、拖放(Draggable)、可排序(Sortable)以及各种类型的下拉菜单和按钮等,这些组件极大地提高了后台操作的便捷性和用户体验。...

Global site tag (gtag.js) - Google Analytics