StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjQueryUI Dialog/Datepicker Auto-Opens
text
Body
copied!<p>I currently have a dialog box with two inputs as its content (with the two inputs using <code>.datepicker()</code>). 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. </p> <p>Ideally, I want to be able to the following:</p> <ul> <li>Open the dialog box (with no datepickers showing).</li> <li>Click in the first input and have the datepicker show.</li> </ul> <p>Here is my current code:</p> <p>JAVASCRIPT:</p> <pre><code>$("#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"); } }); </code></pre> <p>I have also made a jsfiddle demo: <a href="http://jsfiddle.net/ARnee/19/" rel="nofollow noreferrer">http://jsfiddle.net/ARnee/19/</a></p> <p>I have searched online for a solution, and found similar <a href="https://stackoverflow.com/questions/932420/jquery-ui-datepicker-opens-automatically-within-dialog">questions</a>, but none that seem to help. Could anyone assist me?!</p> <p>EDIT:</p> <p>The browser I am using is Chrome.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload