jQuery UI DatePicker Open on Dialog Window Open
Solution 1
You could use the icon trigger: http://jqueryui.com/demos/datepicker/#icon-trigger
And, if needed, prevent the user from typing in a date.
I created a fiddle of a dialog with a datepicker and couldn't duplicate the issue in FF or Chrome. Got it to happen in IE.
$(".datepicker").datepicker({
dateFormat: 'yy-mm-dd '
});
$(".datepicker").datepicker("disable");
$("#dialog").dialog({
width: 400,
modal: true,
open: function(event, ui) {
$(".datepicker").datepicker("enable");
}
});
Based on previous answer: How to blur the first form input at the dialog opening
Solution 2
You can disable the datepicker when the dialog is not open.
$('#datepicker').datepicker({
...
disabled: true
});
$('#dialog').dialog({
open: function(event, ui) {
$('#datepicker').datepicker('enable');
},
close: function(event, ui) {
$('#datepicker').datepicker('disable');
},
...
});
See this in action: http://jsfiddle.net/william/Rf37h/1/.
Nick Olsen
Updated on June 10, 2022Comments
-
Nick Olsen almost 2 years
I am displaying a jQuery UI dialog window that contains a jQuery UI datepicker control in it. The problem is that the first form field on the dialog window is the datepicker and thus it receives focus when the window opens up which in turn causes the datepicker window to automatically open. I don't want this to occur.
I have tried calling
$('#Date').datepicker('hide')
in then open function of the dialog window and also after the code that makes the dialog open but it doesn't work as when that code is reached, the datepicker window isn't open yet.
How can I make it so that the datepicker window doesn't open when the dialog window shows up but still have it open when the user clicks on the input?
-
Nick Olsen over 12 yearsI tried both of these ideas as mentioned in the description and it didn't work. I put a breakpoint on the open function and the datepicker window is not open at that point. It opens after the open function executes.
-
Nick Olsen over 12 yearsDon't know if that is a jsfiddle issue but if you put it in a normally rendered page it happens in Chrome as well.
-
jk. over 12 years@NickOlsen It's the dialog putting focus on the first element. There is a ticket into the jquery ui team to fix. In the meantime, I updated my answer and fiddle.
-
Nick Olsen over 12 yearsThat's somewhat annoying. But, I guess you can't complain to much when it is free! :)
-
jk. over 12 years@NickOlsen True, but it looks like the ui team is working on it for version 1.9.
-
Ashok KS over 11 yearsI see it, but when calling from in a separate file, it doen't work. We need to only include jquery1.6.3 ?
-
Khaneliman about 7 yearsJust adding that you'd want to an the close function to disable it again, if you expect them to open and use the dialog again.