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/

iappwebdev · Accepted Answer · 2012-11-05 13:59:02Z

10

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/

edited Nov 5, 2012 at 13:59

answered Nov 5, 2012 at 13:49

iappwebdev

5,9301 gold badge34 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

A. Wolff Over a year ago

Your jsfiddle doens't correspond to your answer code because your answer code is by far the best answer, not your jsfiddle.

Narayan Akhade · Accepted Answer · 2014-02-12 16:52:09Z

10

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

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

answered Feb 12, 2014 at 16:52

Narayan Akhade

2,7143 gold badges23 silver badges31 bronze badges

1 Comment

PhillyNJ Over a year ago

By far the simplest and easiest solution +1

techfoobar · Accepted Answer · 2012-11-05 13:46:21Z

6

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>

answered Nov 5, 2012 at 13:46

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

Collectives™ on Stack Overflow

jquery datepicker in a dialog

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related