Question

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

我试过调用

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

然后打开对话框窗口的功能，并且在使对话框打开的代码之后但是当达到该代码时它不起作用，则datepicker窗口尚未打开。

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

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");
    }
});

根据之前的回答：How to blur the first form input at the dialog opening

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();
        }
});

您也可以通过调用将openpicker隐藏在打开的事件代码中。

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>

jQuery UI DatePicker在对话框窗口打开

5 个答案: