如果 Datepicker 在 JQuery Dialog 上，JQuery UI Datepicker 的选择月/年下拉菜单在 iPad 中不起作用答案

【问题标题】：JQuery UI Datepicker's select Month/Year drop down doesn't work in iPad if the Datepicker is on JQuery Dialog如果 Datepicker 在 JQuery Dialog 上，JQuery UI Datepicker 的选择月/年下拉菜单在 iPad 中不起作用
【发布时间】：2011-09-02 13:01:34
【问题描述】：

我已经创建了一个这样的 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 对话框上，如果我使用 datepicker 来选择某个日期，它也可以正常工作。只有用于选择某个月份或日期的下拉菜单根本不起作用。我可以看到下拉选项，甚至可以单击任何选项，但在选择任何选项后它并没有隐藏选项列表，它只是停留在那里。

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

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

不知道出了什么问题。

【问题讨论】：

您能否发布更多相关代码，例如下拉和onchange？你能把它们放在 jsfiddle 里吗？
您使用的是最新的 JQuery UI 吗？对话框是模态的吗？

标签： jquery ipad jquery-ui jquery-ui-datepicker jquery-dialog

【解决方案1】：

这似乎与在弹出窗口之外创建的 ui-datepicker-div 有关。我在使用 twitter 引导模式时遇到了同样的问题。我能够通过使用以下方法解决它：

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

希望有帮助！

【讨论】：

谢谢，解决了问题。现在日期选择器的节奏不正确，但至少可以正常工作！
确实，这里也一样；这解决了主要问题。有关如何修复由解决方案引起的放置偏移的任何线索？
@mabian69 你能给我一张你看到的屏幕截图和一个代码示例吗？
这里：jsfiddle.net/mabian/kLdQm 月份和年份下拉菜单在 Firefox 中不起作用。一种解决方案是移动 datepicker div 并使其成为弹出子项，但这是一个麻烦的解决方案，因为我有一个 JQuery Mobile 应用程序，它实际上是一个单页应用程序，并且可以在弹出窗口内部或外部使用日期选择器控件.
另外，在弹出窗口中移动日期选择器会破坏日期选择器放置逻辑......谢谢。

【解决方案2】：

报告了一个错误：http://bugs.jqueryui.com/ticket/8989（它被标记为已修复，但讨论表明它没有正确修复）。

我在 Firefox/Mac 上使用 jQuery-UI 日期选择器在 Bootstrap Modal 上遇到问题。

【讨论】：

我也有这个问题。

【解决方案3】：

我在使用 twitter-bootstrap 模式时遇到了这个问题；就像上面回答的 JadedCore。我相当肯定他的假设是在弹出窗口之外创建的日期选择器（在我的情况下是模态）是问题的原因。

我已经在几个模式中使用过这个日期选择器，并且想要一些东西来“修复”所有位置。我接受了 JadedCore 的回答，并对其进行了修改，使其更适用于多种模式；当模式关闭时，我还将日期选择器移回正文。如果同时显示多个模式，我预见到这个示例会出现问题，所以要小心。

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

【讨论】：

【解决方案4】：

这对我来说很好用：http://jsbin.com/onuhos

【讨论】：

【解决方案5】：

对我来说，解决方案只是增加 dataPicker 所有者元素的 z-index，在您的情况下增加 $('input.datetime', controlContext) 的 z-index

【讨论】：