jquery datepicker in einem Dialog

Question

Ich möchte einen jquery Datepicker in einem Dialogfeld verwenden. Der Datepicker sollte im Fokus (Standard) ausgelöst werden. Da das Textfeld das erste Feld im Dialogfeld ist, hat es automatisch den Fokus. Dies hat den unerwünschten Effekt, dass der Datapicker geöffnet wird, wenn der Dialog zuerst geöffnet wird.

Ich habe viele verschiedene Dinge ausprobiert, z. B. den Fokus auf einen Dummy href setzen, datepicker ('close') aufrufen, nachdem der Dialog geöffnet wurde, showOn auf 'button' setzen und nach dem Öffnen des Dialogs auf 'focus' wechseln aber keine Arbeit.

Der Datepicker sollte nur gerendert werden, wenn das Textfeld den Fokus erhält, außer wenn das Dialogfeld zuerst geöffnet wird.

Mein Schnipsel

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

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

Answer 1

Lösung: ein Dummy-Textfeld vor das Datum Textbox hinzufügen.

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

die Datumsauswahl auf offenen erstellen und es in der Nähe zerstören auf:

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

Eine einfachere Lösung wäre tabindex nur hinzufügen = "- 1" zum Textfeld.

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