jQuery UI DatePicker 在对话框窗口打开时打开

Question

我正在显示一个 jQuery UI 对话框窗口，其中包含一个 jQuery UI 日期选择器控件。问题是对话框窗口上的第一个表单字段是日期选择器，因此当窗口打开时它会接收焦点，从而导致日期选择器窗口自动打开。我不希望这种情况发生。

我尝试调用

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

对话框窗口的 then open 函数，并且在使对话框打开的代码之后调用，但它不起作用，因为到达该代码时，日期选择器窗口尚未打开。

如何才能使日期选择器窗口在对话框窗口显示时不打开，但在用户单击输入时仍然打开？

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

定义对话框时，您可以指定在打开时接收焦点的元素。将焦点设置到对话框中的不同元素

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

您还可以调用隐藏打开事件代码中的日期选择器。

Answer 4

试试这一行代码

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

Answer 5

在它之前添加一个隐藏元素，它将尝试自动对焦。

这将使您的日期选择器在打开对话框时不会受到关注。

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