datepicker dans JQuery UI Dialog affiche le calendrier sur la boîte de dialogue ouverte

Question

J'ai une boîte de dialogue modale JQuery avec 2 entrées Jpu de datepicker JQuery. Mon problème est que lorsque la boîte de dialogue s'ouvre, le calendrier est déjà ouvert sur la page. Je ne suis pas sûr si c'est parce qu'il est en train de se concentrer, mais le résultat net est qu'il apparaît sur la boîte de dialogue ouverte. Voici mon 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

je suis arrivé que cela fonctionne, mais désactiver les datepickers juste avant d'ouvrir ma boîte de dialogue et leur permettant en cas d'ouverture de la boîte de dialogue. Le code est:

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

Lorsque vous placez le champ datepicker au début de la boîte de dialogue, il s'ouvre automatiquement. Vous pouvez placer une entrée masquée au début de la boîte de dialogue.

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