Question

The following code shows Jquery UI Date Picker upon click of a (initially hidden) textbox. Anyone know how to allow the ‘tab’ button to activate it as well? The datepicker class in this case applies to a textbox. Many users would use tab instead of clicking, and it doesn’t work right now..

$(function() { 
    $('.datepicker').live('click', function () {
            $(this).datepicker({showOn: 'both'}).focus();
    });
});

Answer 1

When you say “allow the ‘tab’ button to activate”, I assume you mean hitting tab to shift focus into the text box? If that’s the case, the live handler works on the focus event too, so you could just change your code to catch the focus event instead of click (click will cause the field to get focus & fire then too).

Edit: ..oops, re-reading the code, my hasty example would cause an infinite focus loop, try this instead:

$(function() { 
    $('#ReferenceNumber').live('focus', function () {
        var picker = $(this).datepicker({showOn: ''});
        picker.datepicker("show");
    });
});