5

我有一个使用 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");

我究竟做错了什么？

谢谢！

4

2 回答 2

8

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

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

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

演示：小提琴

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

于 2013-03-13T12:57:09.350 回答
2

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

$("#fromOtherDateTextBox").datepicker({ /* ... */}).close();
于 2013-11-13T11:13:27.227 回答