jquery datepicker in a dialog

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

Create the datepicker on open and destroy it on close:

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

A simpler solution would be to just add tabindex="-1" to the textbox.

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