JQuery UI datepicker closes at next (). Focus ()

Question

I need to select two dates later from the datepicker widget, then I want to focus on the second when the first is selected. I configured it like this:

<input type="text" class="date" id="fromDate" name="fromDate"/> <input type="text" class="date" id="toDate" name="toDate"/> $("input.date").datepicker({ onSelect: function(){ $(this).next(".date").focus(); } }); 

But when I select the first date, the second opens and then closes the window ... why?

I saw that the onClose event works, but I do not want to open another date if the first is not selected ...

Try it from the fiddle: http://jsfiddle.net/Ld98p/1/

Answer 1

It is interesting. Even calling the show () method of the datepicker widget results in the same behavior.

It seems that the onSelect is called in a rather difficult situation, you cannot rely on events and triggering focus or forcing the pop-up to be displayed from the callback itself.

However, launching the focus function from a function with a slight delay works:

 $("input.date").datepicker({ onSelect: function() { window.setTimeout($.proxy(function() { $(this).next(".date").focus(); }, this), 10); } }); 

You can check it in the updated script .

Answer 2

The accepted answer did not work for me, but the following option:

 $("input.date").datepicker({ onSelect: function() { window.setTimeout($.proxy(function() { $('.date').datepicker('show'); }, this), 10); } });