Edit Question - KnowledgeHub

Title Body

I currently have a dialog box with two inputs as its content (with the two inputs using .datepicker() ). When I open dialog box, the first input becomes the focus and the first datepicker automatically appears. I have tried hiding the div and blurring the input, but that causes the datepicker to no longer appear on focus. Ideally, I want to be able to the following: Open the dialog box (with no datepickers showing). Click in the first input and have the datepicker show. Here is my current code: JAVASCRIPT: $("#to").datepicker({ onClose: function (selectedDate) { $("#from").datepicker("option", "minDate", selectedDate); } }); $("#from").datepicker({ onClose: function (selectedDate) { $("#to").datepicker("option", "maxDate", selectedDate); } }); $("#settingsDialog").dialog({ autoOpen: false, open: function (event, ui) { if ($(".ui-datepicker").is(":visible")) $(".ui-datepicker").hide(); $("#to").blur(); $this.focus().click(); }, close: function () { $(this).dialog("close"); } }); I have also made a jsfiddle demo: http://jsfiddle.net/ARnee/19/ I have searched online for a solution, and found similar questions , but none that seem to help. Could anyone assist me?! EDIT: The browser I am using is Chrome.

Tags (comma-separated) Cancel