Datepicker in jQuery UI Dialog shows calendar in dialog box

Question

I have a jQuery modal dialog with 2 IQuery UI datepicker inputs. My problem is that when I open the dialog, the calendar is already open on the page. I'm not sure if this is due to the fact that it receives focus, but the result is that it is displayed in a dialog box. 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 turning off datepickers just before opening my dialog and then turning them on in an open dialog event. The code:

  $('#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 set the datepicker field at the beginning of the dialog, it opens automatically. You can put hidden input at the beginning of the dialog.

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