it-swarm.com.ru

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

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

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

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

28
turezky

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

15
belacqua

Гораздо проще, как я нашел:

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

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

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

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

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

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

8
tvanfosson

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

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

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

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

5
Juliandrea85

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

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

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

У меня была похожая проблема. У меня есть 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');
  }
});

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

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

2
EtienneT

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

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

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

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

1
user1080588

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

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

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

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

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

1
Zorkind

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

showAnim: Drop

0
thiago marini

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

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

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

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