Question

I have a JQuery modal dialog with 2 JQuery UI datepicker inputs. My problem is that when the dialog opens the calendar is already open on the page. I am not sure if this is because it is getting focus but the net result is that it shows on dialog open. Here is my code:

<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

I got this to work but disabling the datepickers just prior to opening my dialog and then enabling them in the open event of the dialog. Code is:

    $( #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

When you put the datepicker field at the beginning of the dialog it is opened automatically. You can place a hidden input at the beginning of the dialog.

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

友情链接