jQuery UI datepicker opens automatically within dialog
Solution 1
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.)
Solution 2
Much simpler way I found:
$("#dialogPopper").click(
function() {
$("#date").datepicker("disable");
$("#dialog").dialog("open");
$("#date").datepicker("enable");
return false;
}
);
Solution 3
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;"/>
Solution 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.
Solution 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:
Change the order of your fields. Avoid the one with datepicker to stay in first place.
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");
).
turezky
Updated on November 17, 2021Comments
-
turezky over 2 years
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?