JQuery UI Dialog中的datepicker在对话框打开时显示日历答案

【问题标题】：datepicker in JQuery UI Dialog shows calendar on dialog openJQuery UI Dialog中的datepicker在对话框打开时显示日历
【发布时间】：2009-11-25 19:10:12
【问题描述】：

我有一个带有 2 个 JQuery UI 日期选择器输入的 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>

【问题讨论】：

标签： jquery dialog datepicker

【解决方案1】：

我让它工作，但在打开我的对话框之前禁用日期选择器，然后在对话框的打开事件中启用它们。代码是：

    $('#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) {
            }                
        })
    });

【讨论】：

【解决方案2】：

当您将日期选择器字段放在对话框的开头时，它会自动打开。您可以在对话框的开头放置一个隐藏的输入。

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

【讨论】：

这是我的解决方案，因为我的日历位于对话框中包含的 .NET 用户控件中。所以没有简单的方法来做被接受的解决方案。