4

我创建了一个 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 上也可以再次重复。

不知道出了什么问题。

4

5 回答 5

4

这似乎与在弹出窗口之外创建的 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);
});

希望有帮助！

于 2013-09-04T19:27:24.497 回答
3

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.

于 2013-09-03T09:43:59.130 回答
2

我在使用 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);
        }
    });
});
于 2015-10-20T18:17:16.113 回答
1

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

于 2012-02-02T13:17:48.517 回答
-1

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

于 2015-01-14T13:52:23.380 回答