7

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

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

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

我的片段

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

JS 小提琴链接：http: //jsfiddle.net/UkTQ8/

4

3 回答 3

9

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

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

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

于 2012-11-05T13:49:57.723 回答
8

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

<input type="text" id="myDate" tabindex="-1" />
于 2014-02-12T16:52:09.600 回答
6

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

演示：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>
于 2012-11-05T13:46:21.457 回答