Datepicker jquery w oknie dialogowym

Question

Chcę użyć datepicker jquery w oknie dialogowym. Datepicker powinien zostać wyzwolony przy fokusie (domyślnie). Ponieważ pole tekstowe jest pierwszym polem w oknie dialogowym, automatycznie jest ono aktywne. Ma to niepożądany efekt otwierania datepaksu po pierwszym otwarciu okna dialogowego.

Próbowałem wielu różnych rzeczy, takich jak ustawienie fokusu do atrapa href, wywołanie datepicker ("zamknij") po otwarciu okna dialogowego, ustawienie showOn na "przycisk", a następnie przejście na "focus" po otwarciu okna dialogowego ale żadna nie działa.

Datepicker powinien być renderowany tylko wtedy, gdy pole tekstowe uzyska fokus, z wyjątkiem sytuacji, gdy okno dialogowe zostanie otwarte jako pierwsze.

Moje urywek

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

JS Fiddle Link: http://jsfiddle.net/UkTQ8/

Answer 1

Rozwiązanie: Dodaj pole tekstowe atrapę przed data tekstowym.

Demo: 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

Tworzenie datepicker na otwarte i zniszczyć go na blisko:

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

Prostszym rozwiązaniem byłoby po prostu dodać tabIndex = "- 1" do pola tekstowego.

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