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

[btburnett3]

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.

[ecaron]

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

[btburnett3]

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.

[mvermilion]

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

[mvermilion]

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

var dialogZ = $(event.target).parents('.ui-dialog').css('zIndex')

0;

to:

var dialogZ = $(event.target).parents('.ui-dialog,.ui-datepicker').css('zIndex')

0;

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

[Scott González]

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

[btburnett3]

Bug/Patch Demo File

[Scott González]

Fixed in r3757 by Brant.

[reefruner5]

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:

​http://stackoverflow.com/questions/7283793/jquery-ui-datepickers-select-month-year-drop-down-doesnt-work-in-ipad-if-the-d