Jquery datepicker button tabindex

Question

I'm using the Jquery date/datetimepicker add-on(s), as well as JQgrid. I'd like the onShow for the date/datetimepicker to be 'button', but when tabbing through the modal, the date/datetime button mustn't get focus.

Iv'e written a function to create the datepicker for me.

function CreateDatePicker(elem, ShowOn) {
    setTimeout(function () {
        $(elem).datepicker({
            dateFormat: 'yy/mm/dd',
            autoSize: false,
            showOn: ShowOn,
            changeYear: true,
            changeMonth: true,
            showButtonPanel: true,
            showWeek: true,
            onClose: function (dateText, inst) {
                $(this).focus();
            }
        });
    }, 100);

    $(elem).mask("9999/99/99", { placeholder: "_" });
}

I call it like this.

initDateEdit = function (elem) {
        CreateDatePicker(elem, 'button');
};

JQgrid code

{ name: 'Date', index: 'Date', editable: true, formoptions: { rowpos: 1, colpos: 2 }, formatter: 'date', formatoptions: { newformat: 'Y/m/d' }, datefmt: 'Y/m/d', editoptions: { dataInit: initDateEdit }, searchoptions: { dataInit: initDateSearch } },

I saw that the datepicker renders like this

<input type="text" id="Date" name="Date" role="textbox" class="FormElement ui-widget-content ui-corner-all hasDatepicker">
<button type="button" class="ui-datepicker-trigger">...</button>

So my initial idea was to latch on to the button class and use Jquery to jump to the next (input) element on the page, regardless of what it is.

I've tried a couple of things, all yielding either incorrect/no results at all...

My last failed attempt...

    $(document).delegate('.ui-datepicker-trigger', 'focus', function (event) {
        $(this).next().focus();
    });

Any help will be appreciated.. a lot :)

Answer 1

The most direct way to solve the problem seems me to set tabindex to "-1":

setTimeout(function () {
    $(elem).datepicker({
        showOn: 'button',
        ...
    }).next('button.ui-datepicker-trigger')
      .attr("tabIndex", "-1");

Try to use Tab in the searching toolbar of the demo and compare the results with another demo created for the answer.

Answer 2

So my initial idea was to latch on to the button class and use jQuery to jump to the next input element on the page, regardless of what it is.