Alex Rivera | Logout

JQuery UI Datepicker loses focus when selecting date with mouse

Asked 2009-09-09T20:31:13.173
39

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)?

jquery jquery-ui
Edit
Report

2 Answers

3

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);
});
answered 2009-09-11T08:14:13.537
3

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

answered 2012-02-16T07:09:30.923

Your Answer