CODEWITHSUNDEEP
jquerydialogdatepicker
MikeD
MikeD

Reputation: 751

datepicker in JQuery UI Dialog shows calendar on dialog open

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>

Upvotes: 6

Views: 9090

Answers (2)

jsonx
jsonx

Reputation: 1090

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;"/>

Upvotes: 5

MikeD
MikeD

Reputation: 751

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) {
            }                
        })
    });

Upvotes: 13

Related Questions