jQuery UI datepicker opens automatically within di

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 script which creates a datepicker for the text input.

$("#date").datepicker({ ... });

When I open the dialog for the first time - everything is okay, but if I close it and reopen again, the datepicker is triggered automatically (and there's no such an option like autoOpen:false) Is there any way of preventing this or what am I doing wrong?

Answer 1

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 2

I know this is a old question, but one solution that worked for me was triggering off a calendar icon:

$( ".date" ).datepicker({
  showOn: "button",
  buttonImage: "../css/imgs/calendar.gif",
  buttonImageOnly: true
});

Answer 3

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 4

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 5

You might want to think about destroying the datepicker when the dialog is closed and creating it in the open event handler for the dialog instead of including it as a script in the dialog creation.

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

You could also experiment with different events/methods to see if you really need to recreate it, but I think that this would work.

Answer 6

Much simpler way I found:

$("#dialogPopper").click(
                    function() {
                        $("#date").datepicker("disable");
                        $("#dialog").dialog("open");
                        $("#date").datepicker("enable");
                        return false;
                    }
                  );