Opened 8 years ago

Closed 7 years ago

Last modified 5 years ago

#4363 closed bug (fixed)

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)

modal-datepicker.html (2.7 KB) - added by btburnett3 7 years ago.
Bug/Patch Demo File

Download all attachments as: .zip

Change History (9)

comment:1 Changed 8 years ago by ecaron

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

comment:2 Changed 8 years ago by 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.

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

Milestone: TBD1.8

comment:4 Changed 7 years ago by mvermilion

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

comment:5 Changed 7 years ago by 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 = $('.ui-dialog').css('zIndex')


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

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.

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

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

Changed 7 years ago by btburnett3

Attachment: modal-datepicker.html added

Bug/Patch Demo File

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

Resolution: fixed
Status: newclosed

Fixed in r3757 by Brant.

comment:9 Changed 5 years ago by 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:

Note: See TracTickets for help on using tickets.