jQueryUI 对话框/日期选择器自动打开

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/

我在网上搜索了解决方案，找到了类似的questions ，但似乎没有任何帮助。有人可以帮助我吗？!

编辑:

我使用的浏览器是Chrome。

Answer 1

尝试将包含日期选择器的输入的 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/