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

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

    $('#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;"/>

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

2 个答案: