JQuery UI DatePicker открывается автоматически в диалоге

Question

У меня есть средство выбора даты, которое используется в объекте диалога jQuery. Источник содержимого диалога загружается с помощью .load(). В диалоге я создал скрипт, который создает указатель даты для ввода текста.

$("#date").datepicker({ ... });

Когда я открываю диалоговое окно в первый раз - все в порядке, но если я закрываю его и открываю снова, средство выбора даты запускается автоматически (и такой опции, как autoOpen:false) нет Есть ли способ предотвратить это или что я делаю не так?

Answer 1

Намного проще найти:

$("#dialogPopper").click(
                    function() {
                        $("#date").datepicker("disable");
                        $("#dialog").dialog("open");
                        $("#date").datepicker("enable");
                        return false;
                    }
                  );

Answer 2

Когда вы помещаете поле datepicker в начало диалога, оно открывается автоматически. Вы можете разместить скрытый ввод в начале диалога.

<input type="text" style="width: 0; height: 0; top: -100px; position: absolute;"/>

Answer 3

У меня была именно эта проблема, и я решил ее лишь с небольшими изменениями в технике tvanfosson. По какой-то причине мне пришлось вручную прикрепить событие "click" к полю datepicker, как показано ниже.

 $('#dialog').dialog({
 open: function(event, ui) {
    $(ui).find('#date').datepicker().click(function(){
        $(this).datepicker('show');
    });
 },
 close: function(event,ui) {
    $(ui).find('#date').datepicker('destroy');
 }});

(Извините, я бы предпочел опубликовать это как комментарий к посту tvanfosson, но у меня нет нужного представителя.)

Answer 4

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

 $('#dialog').dialog({
     open: function(event, ui) {
        $(ui).find('#date').datepicker();
     },
     close: function(event,ui) {
        $(ui).find('#date').datepicker('destroy');
     }
 });

Вы также можете поэкспериментировать с различными событиями / методами, чтобы увидеть, действительно ли вам нужно воссоздать его, но я думаю, что это сработает.

Answer 5

Причина в том, что ваш первый элемент в модальной форме - это текстовое поле datepicker, а при запуске модального режима активным элементом управления является тот, который содержит datepicker.

Я обнаружил два альтернативных решения:

1. Измените порядок полей. Избегайте того, кто выбирает дату, чтобы остаться на первом месте.

2. Не устанавливайте указатель даты в поле в отдельном куске кода, делайте это внутри функции, открывающей диалоговое окно (сразу после открытия $("#dialog").dialog("open");).

Answer 6

Причиной выбора средства выбора является то, что поле ввода остается сфокусированным после первого открытия средства выбора.

Вы должны размыть это:

$input.datepicker({
  onClose: function(dateText) {
    $(this).trigger('blur');
  }
});

Answer 7

У меня была похожая проблема. У меня есть JQuery DatePicker внутри диалогового окна JQuery UI. Выбор даты открывался автоматически в IE, когда я открывал диалог. Это не делалось в Firefox или Chrome ... Я исправил проблему, отключив средство выбора даты при создании в $ (document). Уже так:

$('.ConfirmMove #from').datepicker({
  duration: ''
}).datepicker('disable');

Затем, когда я открывал диалоговое окно, содержащее этот указатель даты, я включил его в обработчике события открытия диалогового окна:

$(".ConfirmMove").dialog({
  close: function() { 
     $('.ConfirmMove #from').datepicker('disable'); 
  },
  open: function() {
     $('.ConfirmMove #from').datepicker('enable');
  }
});

Вы также должны помнить, чтобы отключить его при закрытии диалога.

Таким образом, вы также не уничтожаете и не воссоздаете средство выбора даты каждый раз, когда открываете и закрываете диалоговое окно.

Answer 8

Это просто фокус диалога: api.jqueryui.com / dialog /

При открытии диалога фокус автоматически перемещается на первый элемент, соответствующий следующему

1. Первый элемент в диалоге с атрибутом автофокуса
2. Первый элемент tabbable в содержимом диалога
3. Первый элемент tabbable внутри панели кнопок диалога
4. Кнопка закрытия диалога
5. Сам диалог

Решением является использование атрибута autofocus в других полях, отличных от datepicker.

Answer 9

Это то, что я сделал, чтобы исправить мою проблему.

Этот код находится в создании диалога.

document.getElementById('date').disabled = true;
setTimeout('document.getElementById("date").disabled = false;', 100);

Таким образом, когда диалоговое окно откроется, оно получит фокус в другом элементе управления.

Вы можете проверить тайм-аут на меньшую задержку, но для меня все в порядке.

Answer 10

Из исходного кода я обнаружил, что jQuery.Dialog всегда отслеживает событие focusin для элементов в диалоге и запускает событие focus на этом элементе после того, как диалог переходит в активное состояние. Чтобы предотвратить такое поведение, просто прекратите всплывающее событие при фокусировке элемента.

$("#input").on("focusin", function (e) {
   return false; // or e.stopPropagation();
}).datepicker();

• Обратите внимание, что существуют различия между jQuery версиями
• Билет http://bugs.jqueryui.com/ticket/9125