Question

我有一个使用JQuery UI的应用。这个应用程序需要打开一个对话框并显示两个日期选择器。目前，我有对话框工作。我也有两个日期选择器。我的问题是：a）日期选择器默认日期未显示，b）当我打开对话框时，“从”日期选择器自动打开。这是我的代码初始化对话框和日期选择器：

<div id="myDialog" title="Other Date Range" style="display:none;">
    <table border="0">
        <tr>
            <td>From</td>
            <td></td>
            <td>To</td>
        </tr>
        <tr>
            <td><input id="fromOtherDateTextBox" style="width:140px;" /></td>
            <td>&nbsp;-&nbsp;</td>
            <td><input id="toOtherDateTextBox" style="width:140px;" /></td>
        </tr>
        <tr>
            <td>mm/dd/yyyy</td>
            <td></td>
            <td>mm/dd/yyyy</td>
        </tr>
    </table>
</div>

$(document).ready(function () {
    $("#fromOtherDateTextBox").datepicker({        
        defaultDate: "-1d",
        maxDate: 0,
        minDate: new Date(2000, 1, 1)
    });   

    $("#toOtherDateTextBox").datepicker({        
        defaultDate: "0d",
        maxDate: 0,
        minDate: new Date(2000, 1, 1)
    });   

    $("#myDialog").dialog({
        autoOpen: false, modal: true,
        show: "fade", hide: "fade",
        height:220, width:350,
        buttons: {
            'Cancel': function () { $(this).dialog('close'); },
            'View': useOtherDate_Click
        }
    });    
});

以下是我用来打开对话框的代码：

$("#myDialog").dialog("open");

我做错了什么？

谢谢！

Answer 1

问题是对话框打开时焦点设置为日期控件，这会导致日期选择器打开。

一种可能的解决方案是分配tabIndex=1除数据控件之外的其他元素。

<div id="myDialog" title="Other Date Range" style="display:none;">
    <table border="0" tabIndex="1">

演示：Fiddle

defaultDate property不会设置输入控件的默认日期，只会突出显示弹出窗口中的日期。如果查看datepicker弹出窗口，可以发现设置的defaultDate突出显示

Answer 2

尝试在初始化datepicker组件后调用close()方法。

$("#fromOtherDateTextBox").datepicker({ /* ... */}).close();

jquery datepicker自动打开（但不应该）

2 个答案: