Question

I want to use a jquery datepicker in a dialog box. The datepicker should be triggered on focus (the default). Since the textbox is the first field on the dialog, it automatically has the focus. This has the unwanted effect of opening the datepicker when the dialog is opened first.

I have tried many different things such as setting the focus to a dummy href, calling datepicker(‘close’) after the dialog opens, setting the showOn to ‘button’, then changing to ‘focus’ after the dialog opens but none work.

The datepicker should only be rendered when the textbox gains the focus, except for when the dialog opens first.

My snippet

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

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

Answer 1

Solution: Add a dummy text box before the date textbox.

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>