JQuery UI Datepicker loses focus when selecting date with mouse

Question

I am using JQuery ui with datepicker and when a user tabs on to a field, they appropriately get the calendar pop up.

1. User tabs (via key onto field
2. User s

Answer 1

I had to solve this problem as well and found that the given answers weren't exactly what I was looking for. Here is what I did.

A blog mentioned a jQuery function that would allow you to select the next form element on the screen. I imported that into my project and called it onClose of the datepicker dialog.

In case the link goes dead, here is the function

$.fn.focusNextInputField = function() {
    return this.each(function() {
        var fields = $(this).parents('form:eq(0),body').find('button,input,textarea,select');
        var index = fields.index( this );
        if ( index > -1 && ( index + 1 ) < fields.length ) {
            fields.eq( index + 1 ).focus();
        }
        return false;
    });
};

Then simply called it onClose of the datepicker

$(this).datepicker({
    onClose: function () {
       $(this).focusNextInputField();
    }
});

Hope this helps future visitors.

Answer 2

I was able to get the focus to the next input field after pressing enter (which selects todays date by default) or when clicking a date from the calendar by using this

$(".jqDateField").datepicker('option', {
    dateFormat: 'mm/dd/y', onClose: function () {
        $(':input:eq(' + ($(':input').index(this) + 1) + ')').focus();
    }
});

This may be required to set focus on the next text input incase you have a select or an input button in the "way"

$(':input[type="text"]:eq(' + ($(':input[type="text"]').index(this) + 1) + ')')

Answer 3

Subscribe to the onClose or the onSelect event:

$("#someinput").datepicker(
{
    // other options goes here
    onSelect: function ()
    {
        // The "this" keyword refers to the input (in this case: #someinput)
        this.focus();
    }
});

Or in the case of onClose:

$("#someinput").datepicker(
{
    onClose: function ()
    {
        this.focus();
    }
});

Answer 4

Similar to Jimmy's approach, but this sets the focus to the calendar icon (assuming your calender uses an icon), I found this way more appropriate when I had multiple date pickers next to each other.

Set the date default options so that they set focus to the icon when the calendar popup closes:

    $(".date").datepicker({
        onClose: function() {
            $(this).next('a').focus(); 
        }
    });

Add a tag to the calendar icon so that it's focusable:

    $(".date").each(function() {
        $($(this).next('img')).wrap($("<A/>").attr("href","#"));
    });

Answer 5

See discussion about this problem at http://bugs.jqueryui.com/ticket/7266 with a solution at http://jsfiddle.net/lankarden/9FtnW/

Answer 6

You can probably use the onClose event to return focus to your input when the datepicker closes, as this refers to the associated input field in that callback. For example:

$('.date').datepicker({
   onClose: function() { this.focus(); }
});