JQuery UI对话框中的datepicker显示对话框打开时的日历

Question

我有一个带有2个JQuery UI datepicker输入的JQuery模式对话框.我的问题是,当对话框打开时,页面上的日历已经打开.我不确定这是不是因为它正在获得焦点,但最终结果是它在对话框打开时显示.这是我的代码:

<script type="text/javascript">

        $(function() {
            $('input').filter('.datepicker').datepicker({
                changeMonth: true,
                changeYear: true
            });
        });

</script>

<div id="rpt_dialog" title="">
    <form id="rptDlgForm"  action="/EquipTrack/ShowReport" method="post">         
    <center>
    <div id="rpt_dlg_results"></div>
    </center>
    <div style="float:left; padding-left:50px">From:</div>
    <input  class="datepicker" id="dtReportFrom" name="dtReportFrom" type="text" style="float:left">
    <div style="float:left; padding:0 5px 0 15px">To:</div>
    <input class="datepicker" id="dtReportTo" name="dtReportTo"  type="text" style="float:left">
    <br />
    <br />
    <p><input type="submit" value="Show report" id="btnSubmit" style="float:left;padding-right:10px"/> 
    <input type="button" onclick="CloseReportDialog()" value="Close" id="Button2" /></p>
    <p></p> 
    <input type="hidden"  id="hdnReportName" name="hdnReportName" value=""/>
    </form>         
</div>

Answer 1

我让这个工作,但在打开我的对话框之前禁用了datepickers,然后在对话框的打开事件中启用它们.代码是:

    $('#dtReportFrom').datepicker('disable');
    $('#dtReportTo').datepicker('disable');


    jQuery('#rpt_dialog').dialog('open');


    $(function() {
        $("#rpt_dialog").dialog({
            bgiframe: true,
            width: 540,
            modal: true,
            autoOpen: false,
            resizable: false,
            open: function(event, ui) {
                $(ui).find('#dtReportFrom').datepicker('enable');
                $(ui).find('#dtReportTo').datepicker('enable');
        },
             close: function(event,ui) {
            }                
        })
    });

Answer 2

当您将datepicker字段放在对话框的开头时,它会自动打开.您可以在对话框的开头放置隐藏的输入.

<input type="text" style="width: 0; height: 0; top: -100px; position: absolute;"/>