datepicker en JQuery UI El cuadro de diálogo muestra el calendario en el cuadro de diálogo abierto

Question

Tengo un cuadro de diálogo modal JQuery con 2 entradas JQuery UI datepicker. Mi problema es que cuando se abre el diálogo, el calendario ya está abierto en la página. No estoy seguro de si esto se debe a que se está enfocando, pero el resultado neto es que se muestra en el diálogo abierto. Aquí está mi código:

<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

Tengo que esto funcione, pero deshabilitar los datepickers justo antes de la apertura de mi diálogo y luego lo que les permite en el caso abierto del diálogo. El código es:

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

Cuando coloca el campo datepicker al comienzo del diálogo, se abre automáticamente. Puede colocar una entrada oculta al comienzo del diálogo.

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