I am using JQuery ui with datepicker and when a user tabs on to a field, they appropriately get the calendar pop up.
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)?
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();
}
});
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);
});
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","#"));
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With