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 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

Much simpler way I found:

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

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

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.)

Answer 4

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 5

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 6

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 7

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 8

I was having a similar problem. I have a jquery datepicker inside a jquery ui dialog. The date picker was opening automatically in IE when I opened the dialog. It was not doing that in Firefox or Chrome... I fixed the problem by disabling the datepicker upon creation in the $(document).ready like so:

$('.ConfirmMove #from').datepicker({
  duration: ''
}).datepicker('disable');

Then when I was opening the dialog containing this datepicker I enabled it in the open event handler of the dialog:

$(".ConfirmMove").dialog({
  close: function() { 
     $('.ConfirmMove #from').datepicker('disable'); 
  },
  open: function() {
     $('.ConfirmMove #from').datepicker('enable');
  }
});

You also have to remember to disable it back when you close the dialog.

This way you also don't destroy and recreate the datepicker each time you open and close the dialog.

Answer 9

This is what i did to fix my problem.

This code is in the creation of the dialog.

document.getElementById('date').disabled = true;
setTimeout('document.getElementById("date").disabled = false;', 100);

This way, wen the dialog opens, it will get focus in another control.

You can test the timeout for a smaller amount of delay, but 100 was ok for me.

Answer 10

My decision is to combine jsonx's and Pawel Furmaniak's solutions:

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

$( '.datepickerclass' ).datepicker({
   onClose: function() {
$('#fake-input').trigger("focus");
 }

Answer 11

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 12

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

showAnim: Drop

Answer 13

From source code I found that jQuery.Dialog always tracks focusin event on elements within dialog, and triggers focus event on that element after dialog gains active state. To prevent this behavior just stop bubbling event propagation from element being focused in.

$("#input").on("focusin", function (e) {
   return false; // or e.stopPropagation();
}).datepicker();

• Note that there are differences between jQuery versions
• Ticket http://bugs.jqueryui.com/ticket/9125