Opened 7 years ago

Closed 7 years ago

Last modified 6 years ago

#8088 closed bug (worksforme)

Datepicker Month/Year Dropdowns Not Working In Safari In A Dialog (#4363 has returned)

Reported by: reefruner5 Owned by:
Priority: minor Milestone: 1.9.0
Component: ui.datepicker Version: 1.8.17
Keywords: Cc:
Blocked by: Blocking:


I believe the issue identified in #4363 has returned.

We are using a JQGrid with a datepicker in the add\edit modal dialog. Clicking on the month or year column has no effect in Chrome, and rarely works in IE9. In this case not working indicates that clicking on the dropdown has no affect in setting the value and the dropdown simple disappears.

Firefox 3.6 has no issues and I have not tested on a later version of Firefox. Based on a web search others appear to be having this issue as well:

Version Info: jQuery UI Datepicker 1.8.17 jQuery JavaScript Library v1.7.1

OS: Win7

Browsers Affected: IE9 Chrome 16

Change History (5)

comment:1 Changed 7 years ago by Scott González

Resolution: worksforme
Status: newclosed

comment:2 Changed 7 years ago by reefruner5

Can you please try to reproduce using a jqgrid with a modal dialog instead of just a modal dialog. The reproduction here does not fully cover the scenario we are having issues with.

comment:3 Changed 7 years ago by Scott González

Can you try to reproduce without using a massive plugin?

comment:4 Changed 7 years ago by reefruner5

I copied your example into our codebase and like you saw there are no issues. It only becomes an issue when we overlay this with the JQGrid and use it in the add\edit modal dialog.

comment:5 Changed 6 years ago by nibedita

Hi All

It only becomes an issue when we overlay this with the JQGrid and use it in the add\edit modal dialog.

The bug is occurred due to focus change .When we click the month or year drop down the focus set to first element of add/edit dialogue in jQGrid.

So we have to change the jquery-ui .js file and jquery.js file (according to your version).

declare boolean doNotProcessEvenet =false


f.event = {

add: function (a, c, d, e) {

if (a.nodeType !== 3 && a.nodeType !== 8) {

if (d === !1) d = D; else if (!d) return; var g, h;

d.handler && (g = d, d = g.handler), d.guid
(d.guid = f.guid++);

var i = f._data(a); if (!i) return; var j =,

k = i.handle;

( = j = {}), k (i.handle = k = function (a) {

/* check if the variable is true then return*/

if (doNotProcessEvenet == true){



return typeof f != "undefined" && (!a
f.event.triggered !== a.type) ? f.event.handle.apply(k.elem, arguments) : b

}), k.elem = a, c = c.split(" ");


<select class="ui-datepicker-month" onmouseover="doNotProcessEvenet=true;" onmouseout="doNotProcessEvenet=false;" onchange="DP_jQuery_'+y+".datepicker._selectMonthYear('#""', this, 'M');doNotProcessEvenet=false;\" onclick=\"DP_jQuery_"+y+".datepicker._clickMonthYear('#"+"'

Note: See TracTickets for help on using tickets.