JQuery UI Datepicker select Month / Year drop down does not work on iPad if Datepicker is in the jQuery dialog

Question

I created jQuery UI datepicker as follows:

$.datepicker.setDefaults({ changeMonth: true, changeYear: true, defaultDate: null, dateFormat: dateTimeFormat, showOn: 'both', buttonImageOnly: true, buttonImage: urlPath + 'Content/styles/images/calendar.gif', buttonText: 'Calendar' }); $('input.datetime', controlContext).datepicker({ onSelect: function (dateText, inst) { $(inst, controlContext).val(dateText); var dateSelected = $(inst, controlContext).datepicker("getDate"); }, beforeShow: function (input, inst) { $('.hasDatepicker').blur(); } }); 

It works in all major browsers. It works fine on the iPad as well only if it is not in the jQuery dialog box. In the jQuery dialog box as well, if I use datepicker to just pick a date, it works fine. Only the drop-down list for choosing a month or date does not work at all. I see options for the drop-down menu and I can even click on any of the parameters, but it does not hide the list of options after selecting any parameters, it just stays there.

After a series of debugging, it turned out that the onchange event, which should fire when any month or year is selected, does not fire.

Repeat again, even the month / year selection works fine on the iPad if the datepicker is not in the jQuery dialog.

Not sure what is going wrong.

Answer 1

Something seems to be related to creating a ui-datepicker-div outside of the popup. I had the same problem when using tweeter-bootstrap-modals. I managed to get around this using the following:

 $('#ui-datepicker-div').ready(function() { var popup = document.getElementById('**ID OF YOUR POPUP**'); var datePicker = document.getElementById('ui-datepicker-div'); popup.appendChild(datePicker); }); 

Hope this helps!

Answer 2

The error is reported: http://bugs.jqueryui.com/ticket/8989 (it is marked as fixed, but the discussion suggests that it was not fixed properly).

I am having a problem with Bootstrap Modal using jQuery-UI date picker on Firefox / Mac.

Answer 3

I ran into this problem when working with twitter bootstrap; just like JadedCore which answered above. I am pretty sure of his assumption that the cause of the problem is the date creator created outside the popup (in my case, modal).

I used this date picker in several modules and wanted to “fix” all the locations. I accepted the answer of JadedCore and was modified to be more universal for several modals; I also move the datepicker back to the body when the modal is closed. I anticipate problems with this example if multiple modals are displayed at the same time, so be careful.

 $(function() { $('.modal').on('show.bs.modal', function (e) { var datePicker = document.getElementById('ui-datepicker-div'); if (datePicker) { e.delegateTarget.appendChild(datePicker); } }); $('.modal').on('hide.bs.modal', function (e) { var datePicker = document.getElementById('ui-datepicker-div'); if (datePicker) { $("body").append(datePicker); } }); }); 

Answer 4

This works great for me: http://jsbin.com/onuhos

Answer 5

For me, the solution was simply to increase the z-index of the dataPicker owner element, in your case, increase the z-index of $('input.datetime', controlContext)