JQuery UI DatePicker Открыть в диалоговом окне Открыть

Question

Я отображаю диалоговое окно jQuery UI, в котором находится элемент управления datePicker для jQuery UI. Проблема заключается в том, что первое поле формы в диалоговом окне - это средство выбора даты, и поэтому оно получает фокус при открытии окна, что, в свою очередь, приводит к автоматическому открытию окна средства выбора даты. Я не хочу, чтобы это произошло.

Я пытался позвонить

$('#Date').datepicker('hide')

в функции открытия диалогового окна, а также после кода, который делает диалоговое окно открытым, но он не работает, так как при достижении этого кода окно выбора даты еще не открыто.

Как я могу сделать так, чтобы окно средства выбора даты не открывалось, когда диалоговое окно появляется, но все еще оставалось открытым, когда пользователь нажимает на ввод?

Answer 1

Вы можете использовать значок триггера: http://jqueryui.com/demos/datepicker/#icon-trigger

И, при необходимости, запретить пользователю вводить дату.

Я создал скрипку диалога с датчиком ине удалось продублировать проблему в FF или Chrome.Это произошло в IE.

http://jsfiddle.net/458bM/2/

$(".datepicker").datepicker({
    dateFormat: 'yy-mm-dd '
});

$(".datepicker").datepicker("disable");

$("#dialog").dialog({
width: 400,
modal: true,
open: function(event, ui) {
    $(".datepicker").datepicker("enable");
    }
});

Основано на предыдущем ответе: Как размыть первый ввод формы при открытии диалога

Answer 2

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

$('#datepicker').datepicker({ 
    ...
    disabled: true 
});

$('#dialog').dialog({
    open: function(event, ui) {
        $('#datepicker').datepicker('enable');
    },
    close: function(event, ui) {
        $('#datepicker').datepicker('disable');
    },
    ...
});

Смотрите это в действии: http://jsfiddle.net/william/Rf37h/1/.

Answer 3

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

Это предотвратит фокусировку на датере при открытии диалога.

<span class="ui-helper-hidden-accessible"><input type="text"/>Prevents autofocus from opening start datepicker on dialog load</span>

Answer 4

Попробуйте этот код одной строки

$(document).ready (function () { 
 $('#dialog_modal_body').on("click", ".datepicker", function(){
       $("#ui-datepicker-div").css("z-index", "100000");
 });
});

Answer 5

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

$('#myDialog').dialog({
    open: function (event, ui)
        {
            $('#myInputBox').focus();
        }
});

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