对话框中的jquery datepicker

Question

我想在对话框中使用jquery datepicker.应该在焦点上触发日期选择器(默认值).由于文本框是对话框中的第一个字段,因此它自动具有焦点.当首先打开对话框时,这会产生打开日期选择器的不良影响.

我尝试了很多不同的东西,比如将焦点设置为虚拟href,在对话框打开后调用datepicker('close'),将showOn设置为'button',然后在对话框打开后更改为'focus'但不起作用.

只有在文本框获得焦点时才应呈现日期选择器,但对话框首先打开时除外.

我的片段

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

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

Answer 1

在open上创建datepicker并在close时将其销毁:

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

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

Answer 2

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

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

Answer 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>