JQuery UI Datepicker в выпадающем списке «Месяц / Год» не работает в iPad, если Datepicker включен в JQuery Dialog

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

Работает во всех основных браузерах. Он отлично работает на Ipad, только если он не в диалоговом окне jQuery. В диалоговом окне jQuery также, если я использую указатель даты для выбора какой-либо даты, она работает нормально. Только выпадающий список для выбора месяца или даты не работает вообще. Я вижу раскрывающиеся параметры и даже могу щелкнуть любой из параметров, но он не скрывает список параметров после выбора любого из параметров, он просто остается там.

После долгих отладок я обнаружил, что событие onchange, которое должно сработать во время выбора любого месяца или года, не запускается.

Повторять еще раз, даже если выбрать месяц / год, то на iPad все работает нормально, если средство выбора даты отсутствует в диалоговом окне jQuery.

Не уверен, что происходит не так.

Answer 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);
});

Надеюсь, это поможет!

Answer 2

Об ошибке сообщается: http://bugs.jqueryui.com/ticket/8989 (она помечена как исправленная, но обсуждение показывает, что она не была исправлена ​​должным образом).

У меня проблема с Bootstrap Modal с помощью средства выбора даты jQuery-UI в Firefox / Mac.

Answer 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);
        }
    });
});

Answer 4

Это нормально работает для меня: http://jsbin.com/onuhos

Answer 5

Для меня решение было просто увеличить z-индекс элемента-владельца dataPicker, в вашем случае увеличить z-index на $('input.datetime', controlContext)