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

【问题标题】：jQueryUI Dialog/Datepicker Auto-OpensjQueryUI 对话框/日期选择器自动打开
【发布时间】：2012-12-19 10:33:21
【问题描述】：

我目前有一个对话框，其中有两个输入作为其内容（两个输入使用.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。

【问题讨论】：

标签： jquery jquery-ui dialog datepicker

【解决方案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/

【讨论】：

+1 - 为此，您需要将其应用于inputs。无论如何，非常好的发现！
这也是我的解决方案。应该是公认的答案。

【解决方案2】：

可以在没有高度的对话框中粘贴虚拟输入，因此不会被看到。将它放在日期选择器字段之前

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

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

【讨论】：

感谢您的帮助！这是一种巧妙的方法！
谢谢。我还设置了'背景：透明'，因为表单有不同的颜色。
这个解决方案有效，但在不可见的输入周围留下了一个丑陋的选定框架，令人恼火。一旦你点击其他地方，它就会消失。

【解决方案3】：

您可以在打开对话框时创建日期选择器，如下所示：

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

                     $("#to").blur();
                 },
     close: function () {
         $("#to").datepicker("destroy");
         $("#from").datepicker("destroy");
         $(this).dialog("close");
     }
});



$("#b1").click(function(){
      $("#settingsDialog").dialog("open");
      $("#to").datepicker({
         onClose: function (selectedDate) {
            $("#from").datepicker("option", "minDate", selectedDate);
         }
      });

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

【讨论】：

还应该在关闭时使用destroy，以防再次使用对话框

【解决方案4】：

$(document).ready(function(){



$("#settingsDialog").dialog({
     autoOpen: false,
    open: function (event, ui) {
        $("#to").datepicker({
        onClose: function (selectedDate) {
            $("#from").datepicker("option", "minDate", selectedDate);
        }
    });

    $("#from").datepicker({
        onClose: function (selectedDate) {                            $("#to").datepicker("option", "maxDate", selectedDate);
    }
});
                     if ($(".ui-datepicker").is(":visible"))
                         $(".ui-datepicker").hide();

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



    $("#b1").click(function(){
       $("#settingsDialog").dialog("open");
    });

});

【讨论】：

不幸的是，这仅适用于打开的初始对话框。如果您关闭它并再次打开它，问题仍然存在。
你是对的，正如 mccannf 所说，使用 destroy for datepicker on close 将解决它