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

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

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 3

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

Answer 4

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 5

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

showAnim: Drop

Answer 6

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.