如果日期选择器位于 JQuery 对话框上，则 JQuery UI 日期选择器的选择月/年下拉菜单在 iPad 中不起作用

Question

我创建了一个像这样的 jQuery UI 日期选择器:

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

它适用于所有主要浏览器。仅当它不在 jQuery 对话框上时，它才能在 Ipad 上正常工作。在 jQuery 对话框中，如果我使用日期选择器来选择某个日期，它也可以正常工作。只有用于选择某个月份或日期的下拉菜单根本不起作用。我可以看到下拉选项，甚至可以单击任何选项，但在选择任何选项后它不会隐藏选项列表，它只是停留在那里。

经过大量调试后，我发现应该在选择任何月份或年份时触发的 onchange 事件没有触发。

再次重复，如果日期选择器不在 jQuery 对话框中，即使选择月/年在 iPad 上也能正常工作。

不知道出了什么问题。

Answer 1

这似乎与在弹出窗口之外创建的 ui-datepicker-div 有关。我在使用 twitter bootstrap modals 时遇到了同样的问题。我可以使用以下方法解决这个问题:

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

希望有帮助!