对话框中的jquery datepicker答案

【问题标题】：jquery datepicker in a dialog对话框中的jquery datepicker
【发布时间】：2012-11-05 13:41:58
【问题描述】：

我想在对话框中使用 jquery datepicker。日期选择器应在焦点上触发（默认）。由于文本框是对话框中的第一个字段，因此它会自动获得焦点。这会在第一次打开对话框时打开日期选择器，这会产生不良影响。

我尝试了许多不同的方法，例如将焦点设置为虚拟 href，在对话框打开后调用 datepicker('close')，将 showOn 设置为“按钮”，然后在对话框打开后更改为“焦点”但是没有工作。

日期选择器仅应在文本框获得焦点时呈现，对话框首先打开时除外。

我的sn-p

$(function() {
    $('#btnDialog').click(function() {
        $('#myDate').datepicker({
            title: 'Test Dialog'
        });
        $('#myDialog').dialog();
    });
});

JS Fiddle 链接：http://jsfiddle.net/UkTQ8/

【问题讨论】：

标签： jquery jquery-ui

【解决方案1】：

在打开时创建日期选择器并在关闭时销毁它：

$(function() {
    $('#btnDialog').click(function() {
        $('#myDialog').dialog({
            open: function() {
                $('#myDate').datepicker({title:'Test Dialog'}).blur();
            },
            close: function() {
                $('#myDate').datepicker('destroy');
            },
        });
    });
});

演示：http://jsfiddle.net/UkTQ8/7/

【讨论】：

您的 jsfiddle 与您的答案代码不对应，因为您的答案代码是迄今为止最好的答案，而不是您的 jsfiddle。

【解决方案2】：

更简单的解决方案是将 tabindex="-1" 添加到文本框。

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

【讨论】：

迄今为止最简单最简单的解决方案 +1

【解决方案3】：

解决方案：在日期文本框之前添加一个虚拟文本框。

演示：http://jsfiddle.net/UkTQ8/4/

<div id="myDialog" title="Text Dialog">

<input type="text" id="dummyDate" /> <!-- dummy textbox -->

<p>The textbox below should show the datepicker on focus, except for when the dialog opens.</p>
Enter date: <input type="text" id="myDate" />
</div>

【讨论】：