JQuery UI中的datepicker对话框显示对话框打开的日历

Question

我有一个JQuery模式对话框，带有2个JQuery UI日期选择器输入。我的问题是当对话框打开时，页面上的日历已经打开。我不确定这是否是因为它获得了重点，但最终结果是它在对话框打开时显示。这里是我的代码：

<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

我得到这个工作，但禁用datepickers之前，为了打开我的对话框，然后让他们在对话框的open事件。代码是：

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

当您将datepicker字段放在对话框的开头时，它会自动打开。您可以在对话框的开头放置一个隐藏的输入。

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