Datepicker Month and Year dropdowns in IE have to click twice

[[email protected]…]

In IE6 and IE8 when using the datepicker dropdowns for month and year using the options : changeMonth: true, changeYear: true you have to click twice in IE, the first click the drop down flashes up, the second click displays the dropdown as expected. It works with a single click in firefox and chrome.

This can be replicated by going to :

​http://jqueryui.com/demos/datepicker/#dropdown-month-year

using IE 6 or 8 and clicking on the dropdowns. I couldn't find any references to this issue. I cant believe I'm the first to see this so sorry if its an known issue.

[[email protected]…]

I am having exactly the same problem. However not on all pages. I can't see why it works flawlessly on some and has the irritating "click twice" bug on others

[[email protected]…]

If I go back to the stand alone datepicker ver 1.8, it works. I created a custom jquery-ui-1.8.6.custom.min.js file without the date picker and the also referenced an old jquery.ui.datepicker.js file that I still had and it works fine.

The header in that file is: /*

• jQuery UI Datepicker 1.8 *
• Copyright (c) 2010 AUTHORS.txt (​http://jqueryui.com/about)
• Dual licensed under the MIT (MIT-LICENSE.txt)
• and GPL (GPL-LICENSE.txt) licenses. *
• ​http://docs.jquery.com/UI/Datepicker *
• Depends:
• jquery.ui.core.js */

[chubyqc]

We've experienced this problem too, with IE7 and IE8.

In our case, it happened with 1.8.5 too.

[Scott González]

#6769 is a duplicate of this ticket.

[jdufresne]

Created a fix for this bug. There is focus logic in the _selectMonthYear() and _clickMonthYear() that goes out of sync. The onclick event occurs when clicking the select, the onchange event occurs when selecting an item from the select, but the user is free to click outside the select getting the flag out of whack. I found it most convenient to just delete this logic altogether and saw no regressions. Tested in Firefox, IE7, and IE8. I do not have IE6 at my disposal to test. Patch below.

diff --git a/ui/jquery.ui.datepicker.js b/ui/jquery.ui.datepicker.js
index abcb370..6dc326f 100644
--- a/ui/jquery.ui.datepicker.js
+++ b/ui/jquery.ui.datepicker.js
@@ -850,7 +850,6 @@ $.extend(Datepicker.prototype, {
 	_selectMonthYear: function(id, select, period) {
 		var target = $(id);
 		var inst = this._getInst(target[0]);
-		inst._selectingMonthYear = false;
 		inst['selected' + (period == 'M' ? 'Month' : 'Year')] =
 		inst['draw' + (period == 'M' ? 'Month' : 'Year')] =
 			parseInt(select.options[select.selectedIndex].value,10);
@@ -858,18 +857,6 @@ $.extend(Datepicker.prototype, {
 		this._adjustDate(target);
 	},
 
-	/* Restore input focus after not changing month/year. */
-	_clickMonthYear: function(id) {
-		var target = $(id);
-		var inst = this._getInst(target[0]);
-		if (inst.input && inst._selectingMonthYear) {
-			setTimeout(function() {
-				inst.input.focus();
-			}, 0);
-		}
-		inst._selectingMonthYear = !inst._selectingMonthYear;
-	},
-
 	/* Action for selecting a day. */
 	_selectDay: function(id, month, year, td) {
 		var target = $(id);
@@ -1550,7 +1537,6 @@ $.extend(Datepicker.prototype, {
 			var inMaxYear = (maxDate && maxDate.getFullYear() == drawYear);
 			monthHtml += '<select class="ui-datepicker-month" ' +
 				'onchange="DP_jQuery_' + dpuuid + '.datepicker._selectMonthYear(\'#' + inst.id + '\', this, \'M\');" ' +
-				'onclick="DP_jQuery_' + dpuuid + '.datepicker._clickMonthYear(\'#' + inst.id + '\');"' +
 			 	'>';
 			for (var month = 0; month < 12; month++) {
 				if ((!inMinYear || month >= minDate.getMonth()) &&
@@ -1583,7 +1569,6 @@ $.extend(Datepicker.prototype, {
 			endYear = (maxDate ? Math.min(endYear, maxDate.getFullYear()) : endYear);
 			inst.yearshtml += '<select class="ui-datepicker-year" ' +
 				'onchange="DP_jQuery_' + dpuuid + '.datepicker._selectMonthYear(\'#' + inst.id + '\', this, \'Y\');" ' +
-				'onclick="DP_jQuery_' + dpuuid + '.datepicker._clickMonthYear(\'#' + inst.id + '\');"' +
 				'>';
 			for (; year <= endYear; year++) {
 				inst.yearshtml += '<option value="' + year + '"' +

[rdworth]

#7212 is a duplicate of this ticket.

[Scott González]

Datepicker: Removed click handling for month and year dropdowns. Fixes #6198 - Datepicker Month and Year dropdowns in IE have to click twice.

Thanks jdufresne

Changeset: 70687f7955cb2471ad6df3a7806031245e5979cd

[Scott González]

Datepicker: Removed click handling for month and year dropdowns. Fixes #6198 - Datepicker Month and Year dropdowns in IE have to click twice.

Thanks jdufresne (cherry picked from commit 70687f7955cb2471ad6df3a7806031245e5979cd)

Changeset: 1d4795683e21a49115f1b0458349c63c5f54ac33

[dcaballero]

I'm still seeing this issue in IE8, using 1.8.16

Please see: ​http://www.promocionesdell.com/navidad/registro-primera-vez.php

The input labeled "Fecha Nacimiento"

[rdworth]

Replying to dcaballero:

I'm still seeing this issue in IE8, using 1.8.16

Please see: ​http://www.promocionesdell.com/navidad/registro-primera-vez.php

The input labeled "Fecha Nacimiento"

This ticket is related to month and year drop-downs. The sample you linked to has neither.