在對話框中的jquery datepicker

Question

我想在對話框中使用jquery datepicker。日期選擇器應該在焦點上觸發（默認）。由於文本框是對話框中的第一個字段，因此它會自動獲得焦點。當首先打開對話框時，這具有打開日期選擇器的不希望的效果。

我嘗試了很多不同的方法，例如將焦點設置爲虛擬href，在對話框打開後調用datepicker（'close'），將showOn設置爲'button'，然後在對話框打開後更改爲'focus'但沒有工作。

只有當文本框獲得焦點時，纔會呈現日期選擇器，但首次打開對話框時除外。

我的片段

$(function() { 
    $('#btnDialog').click(function() { 
     $('#myDate').datepicker({ 
      title: 'Test Dialog' 
     }); 
     $('#myDialog').dialog(); 
    }); 
});​ 

JS小提琴鏈接：http://jsfiddle.net/UkTQ8/

Answer 1

解決方案：日期文字框添加一個虛擬文本框。

演示：http://jsfiddle.net/UkTQ8/4/

<div id="myDialog" title="Text Dialog"> 

<input type="text" id="dummyDate" /> <!-- dummy textbox --> 

<p>The textbox below should show the datepicker on focus, except for when the dialog opens.</p> 
Enter date: <input type="text" id="myDate" /> 
</div> 

Answer 2

開放創建日期選擇器並關閉破壞它：

$(function() { 
    $('#btnDialog').click(function() { 
     $('#myDialog').dialog({ 
      open: function() { 
       $('#myDate').datepicker({title:'Test Dialog'}).blur(); 
      }, 
      close: function() { 
       $('#myDate').datepicker('destroy'); 
      }, 
     }); 
    }); 
}); 

DEMO：http://jsfiddle.net/UkTQ8/7/

Answer 3

一個簡單的辦法是隻添加的TabIndex =「 - 1」到文本框。

<input type="text" id="myDate" tabindex="-1" />