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

Question

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

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

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

Answer 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, но не имеют необходимых респ.)

Answer 2

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

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

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

Answer 3

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

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

Тогда, когда я открывала диалоговое окно, содержащее этот DatePicker Я включил его в открытом обработчик события диалога:

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

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

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

Answer 4

Гораздо более простой способ я нашел:

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

Answer 5

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

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

Answer 6

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

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

Answer 7

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

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

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

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

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

Answer 8

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

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

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

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

Answer 9

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

showAnim: Drop

Answer 10

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

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

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

Answer 11

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

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

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

Answer 12

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

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

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

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