Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JQuery UI Datepicker loses focus when selecting date with mouse

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 selects date with mouse click
  3. User tabs
  4. Tabindex starts over at one (at the beginning of form)

Here is code. (May also have the tab index set)

<input type="text" name="demo" />
<input type="text" class="date" />

The jquery code is:

$(".date").datepicker();

Any suggestions on how I might go about solving this issue (bonus to shortest solution)?

like image 532
Jeff Ancel Avatar asked Sep 09 '09 20:09

Jeff Ancel


4 Answers

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();
    }
});
like image 120
cllpse Avatar answered Oct 16 '22 07:10

cllpse


Thanks for the suggestion Jeff, I modified your onSelect function to use the attribute filter to retrieve only elements with the tabindex specified by "nexttab".

$(function(){
  $(".date").datepicker({
      onSelect: function(){
          currenttab = $(el).attr("tabindex");
          nexttab = currenttab * 1 + 1;
          $("[tabindex='" + nexttab + "']").focus();
      }
  });
});

PS: If you don't have tabindexes specified in your code, like I neglected to do earlier, simply add the following code:

$('input, select').each(function(i, val){
    $(this).attr('tabindex', i + 1);
});
like image 27
johnnynotsolucky Avatar answered Oct 16 '22 06:10

johnnynotsolucky


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

like image 3
Dave Carmean Avatar answered Oct 16 '22 06:10

Dave Carmean


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","#"));
    });
like image 2
Oli B Avatar answered Oct 16 '22 07:10

Oli B