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.

Answer 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!