jQuery UI datepicker opens automatically within dialog

Question

I have a datepicker which is used within the jQuery dialog object. The source of the dialog\'s content is loaded using .load(). Within the dialog I created a sc

Answer 1

It's just dialog focus: api.jqueryui.com/dialog/

Upon opening a dialog, focus is automatically moved to the first item that matches the following

1. The first element within the dialog with the autofocus attribute
2. The first :tabbable element within the dialog's content
3. The first :tabbable element within the dialog's buttonpane
4. The dialog's close button
5. The dialog itself

A solution is to use the autofocus attribute on other fields than datepicker.

Answer 2

When you put the datepicker field at the beginning of the dialog it is opened automatically. You can place a hidden input at the beginning of the dialog.

<input type="text" style="width: 0; height: 0; top: -100px; position: absolute;"/>

Answer 3

The reason is : your first item inside modal form is the datepicker text field, and when the modal is fired, the active control is the one who contains the datepicker.

I found out two alternative solutions:

1. Change the order of your fields. Avoid the one with datepicker to stay in first place.

2. Do not set datepicker to the field in a separate piece of code, do it inside the function that opens the dialog (right after openning $("#dialog").dialog("open");).

Answer 4

For some reason the calendar stopped having this behavior when I filled in the animation option in the initializer:

showAnim: Drop

Answer 5

The reason picker opens by itself, is that the input field stays focused after you open picker for the first time.

You need to blur it:

$input.datepicker({
  onClose: function(dateText) {
    $(this).trigger('blur');
  }
});

Answer 6

I had this exact problem and solved it with only a slight variation on tvanfosson's technique. For some reason I had to manually attach the "click" event to the datepicker field as below.

 $('#dialog').dialog({
 open: function(event, ui) {
    $(ui).find('#date').datepicker().click(function(){
        $(this).datepicker('show');
    });
 },
 close: function(event,ui) {
    $(ui).find('#date').datepicker('destroy');
 }});

(Sorry--I would've preferred to post this as a comment to tvanfosson's post but don't have the requisite rep.)