JQuery UI Datepicker loses focus when selecting date with mouse
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);
});
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();
}
});
See discussion about this problem at http://bugs.jqueryui.com/ticket/7266 with a solution at http://jsfiddle.net/lankarden/9FtnW/
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","#"));
});