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

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 2

Much simpler way I found:

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

Answer 3

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 4

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 5

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 6

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.