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

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

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

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

Ответ 1

У меня была эта точная проблема и она была решена с небольшим изменением техники 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, но не имеет необходимой репутации.)

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

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

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

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

Ответ 5

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

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

Измените порядок своих полей. Избегайте того, на котором есть датапикер, чтобы оставаться на первом месте.
Не устанавливайте datepicker в поле в отдельном фрагменте кода, выполняйте его внутри функции, которая открывает диалоговое окно (сразу после открытия $("#dialog").dialog("open");).

Ответ 6

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

Вам нужно размыть его:

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

Ответ 7

У меня была аналогичная проблема. У меня есть jquery datepicker внутри диалогового окна jquery ui. Когда я открыл диалоговое окно, программа выбора даты автоматически открывалась в IE. Это не делалось в Firefox или Chrome... Я исправил эту проблему, отключив датпикер после создания в $(документе). Уже вот так:

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

Затем, когда я открывал диалоговое окно с этим параметром datepicker, я включил его в открывшемся обработчике событий диалогового окна:

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

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

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

Ответ 8

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

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

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

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

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

Ответ 9

Я знаю, что это старый вопрос, но одно решение, которое сработало для меня, запускало значок календаря:

$( ".date" ).datepicker({
  showOn: "button",
  buttonImage: "../css/imgs/calendar.gif",
  buttonImageOnly: true
});

Ответ 10

По какой-то причине календарь прекратил свое поведение, когда я заполнил параметр анимации в инициализаторе:

showAnim: Drop

Ответ 11

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

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

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

Ответ 12

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

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

Первый элемент в диалоговом окне с атрибутом автофокуса

Первый: tabbable-элемент внутри содержимого диалога

Первый: tabbable-элемент в панели кнопок диалога

Кнопка закрытия диалогового окна

Сам диалог

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