Skip to main content

Search and Top Navigation

#4363 closed bug (fixed)

Opened March 18, 2009 10:22PM UTC

Closed January 29, 2010 09:35PM UTC

Last modified February 01, 2012 04:35PM UTC

Datepicker Month/Year Dropdowns Not Working In Safari In A Dialog

Reported by: btburnett3 Owned by:
Priority: minor Milestone: 1.8
Component: ui.datepicker Version: 1.7
Keywords: Cc:
Blocked by: Blocking:

If you are using month or year change drop downs, and the datepicker is placed inside a dialog, clicking on the drop downs in Safari 3 has no effect. Not sure if it's not displaying the drop down, or if it is somehow hidden due to a z-index issue. In order to get the datepicker to work with dialogs, I set ''.ui-datepicker {z-index: 10000)'' in my CSS file.

Attachments (1)
Change History (8)

Changed April 06, 2009 01:29PM UTC by ecaron comment:1

Is this possibly related to ticket #4338, "DatePicker shown under Dialog box", which was marked as don't fix?

Changed April 15, 2009 02:29AM UTC by btburnett3 comment:2

It isn't related to that, I've already corrected this by applying a z-index to my datepicker

to bring it to the foreground.

I tracked down the problem, it is related to the overlay of a modal

dialog box. The overlay traps all bubbled mouse events and cancels them if they are not from a child

of the dialog. Since the datepicker's DIV is outside the dialog, all events are cancelled. This

doesn't affect any of the controls normally. However, the SELECT control is paying attention to this

cancel in Safari only.

I worked around it temporarily on my site by adding an additional filter to the overlay event in the ui.dialog.js file, but this isn't a very elegant solution to the problem.

Changed April 17, 2009 03:04AM UTC by scottgonzalez comment:3

milestone: TBD1.8

Changed October 27, 2009 10:47PM UTC by mvermilion comment:4

I have also reproduced this issue while testing one of my applications. This occurs in webkit browsers only (Safari and Chrome).

Changed October 28, 2009 12:09AM UTC by mvermilion comment:5

FYI, I made the following change to work around this issue at approximately line 537 in ui.dialog.js (1.7.1):


var dialogZ = $('.ui-dialog').css('zIndex') || 0;


var dialogZ = $('.ui-dialog,.ui-datepicker').css('zIndex') || 0;

This solution is not ideal though. I wish you could just check on the zIndex of, but that doesn't seem to work, probably because zIndex only applies to absolutely positioned elements.

Changed December 23, 2009 01:53PM UTC by scottgonzalez comment:6

This may be a great candidate for using the new .zIndex() method.

Changed January 29, 2010 09:35PM UTC by scottgonzalez comment:7

resolution: → fixed
status: newclosed

Fixed in r3757 by Brant.

Changed February 01, 2012 04:35PM UTC by reefruner5 comment:8

I believe this issue 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 sometimes works in IE9. Firefox 3.6 has no issues and have not tested on a later version of Firefox. Based on a web search others appear to be having this issue as well: