JQuery UI Datepicker's select Month/Year drop down doesn't work in iPad if the Datepicker is on JQuery Dialog

Question

I have created a jQuery UI datepicker like this:

 $.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 the major browsers. It works fine on Ipad also only if it is not on jQuery dialog. On jQuery dialog also if I use the datepicker for just selecting some date it is working fine. Only the dropdown for selecting some month or date is not working at all. I can see the dropdown options and even can click on any of the options but it is not hiding the option list after selecting any of the options, it just stays there.

After lot of debugging I found out that the onchange event that is supposed to fire at the time of selecting any month or year is not firing.

To repeat again even selecting of month/year works fine on iPad, if the datepicker is not on jQuery dialog.

Not sure what's going wrong.

Solution 1

It seems to be something related to the ui-datepicker-div being created outside of the popup. I was having the same issue while using twitter bootstrap modals. I was able to get around it by 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 that helps!

Solution 2

There is a bug reported: http://bugs.jqueryui.com/ticket/8989 (it's marked as fixed but the discussion suggests it wasn't fixed properly).

I'm experiencing the issue on Bootstrap Modal with jQuery-UI date picker on Firefox/Mac.

Solution 3

I was experiencing this issue while working with a twitter-bootstrap modal; just like JadedCore, who answered above. I fairly certain his assumption that the datepicker being created outside of the popup (in my case, the modal) was the cause of the problem.

I've used this datepicker in several modals and wanted something to 'fix' all locations. I took JadedCore's answer and modified to be more universal for multiple modals; I also move the datepicker back to the body when a modal is closed. I foresee issues with this example if there are multiple modals being displayed simultaneously, so beware.

$(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);
        }
    });
});

Solution 4

This is working fine for me: http://jsbin.com/onuhos

View more solutions