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

score 4 · Accepted Answer · edited May 23 '17 at 10:28

4

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.

edited May 23 '17 at 10:28

Community

1
1

answered Apr 04 '12 at 11:20

Oleg

220,925
34
403
798

1

aha! i tried the the tabindex -1 thing earlier, but had nooo idea how to append it to the button via jquery. thanks for the answer again. – Rohan Büchner Apr 04 '12 at 11:37
that link is broken. also, setting tabindex doesnt seem to work on samsung galaxy s4. – john-jones Jan 20 '16 at 13:54

score 1 · Answer 2 · edited Aug 22 '13 at 00:07

1

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.

edited Aug 22 '13 at 00:07

Ry-

218,210
55
464
476

answered Apr 04 '12 at 10:48

Andrew

11
1

3

I wont lie, your wisdom confuses me.. :/ – Rohan Büchner Apr 04 '12 at 10:53

Jquery datepicker button tabindex

2 Answers2