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

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 2

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 3

also add this to the style sheet.

ui-datepicker-div, .ui-datepicker { z-index: 2000; }

Answer 4

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 5

Much simpler way I found:

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