jQueryUI Dialog/Datepicker自动打开

Question

我目前有一个对话框,其中有两个输入作为其内容(使用两个输入.datepicker()).当我打开对话框时,第一个输入成为焦点,第一个日期选择器自动出现.我试图隐藏div并模糊输入,但这会导致日期选择器不再出现在焦点上.

理想情况下,我希望能够满足以下条件:

• 打开对话框(没有显示日期选择器).
• 单击第一个输入并显示日期选择器.

这是我目前的代码:

JAVASCRIPT:

$("#to").datepicker({
      onClose: function (selectedDate) {
         $("#from").datepicker("option", "minDate", selectedDate);
      }
    });

    $("#from").datepicker({
     onClose: function (selectedDate) {                            
         $("#to").datepicker("option", "maxDate", selectedDate);
    }
});


$("#settingsDialog").dialog({
     autoOpen: false,
    open: function (event, ui) {
                     if ($(".ui-datepicker").is(":visible"))
                         $(".ui-datepicker").hide();

                     $("#to").blur();
                     $this.focus().click();
                 },
     close: function () {
         $(this).dialog("close");
     }
});

我也做了一个jsfiddle演示:http: //jsfiddle.net/ARnee/19/

我在网上搜索了一个解决方案,并发现了类似的问题,但似乎没有任何帮助.谁能帮助我？!

编辑:

我使用的浏览器是Chrome.

Answer 1

尝试将包含datepicker的输入的tabindex属性设置为-1.

<input type="text" id="to" tabindex="-1" />

编辑:

<input id="to" type="text" tabindex="-1" />
<input id="from" type="text" tabindex="-1" />  

演示:http: //jsfiddle.net/ARnee/32/

Answer 2

可以在没有高度的对话框中粘贴虚拟输入,因此不会被看到.将它放在datepicker字段之前

<input style="height:0px; border:none"/>

演示:http://jsfiddle.net/ARnee/20/