Question

I need to select subsequently two dates from a datepicker widget, then I want to focus on the second when the first one is selected.
I set it up 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 then closes the window… why?

I saw that with onClose event works, but I don’t want to open the other date if the first one is not selected…

Please try it from fiddle: http://jsfiddle.net/Ld98p/1/

Answer 1

That’s interesting. Even calling the show() method of the datepicker widget results in the same behavior.

It looks like the onSelect callback is invoked in a pretty complex situation, events-wise, and triggering focus or force-showing the popup from the callback itself cannot be relied upon.

However, triggering focus from a slightly delayed function appears to work:

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

You can test it in your updated fiddle.