javascript - Jquery datepicker button tabindex - Stack Overflow

admin管理员组

文章数量:1323150

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

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

• javascript
• jquery
• jquery-ui
• jqgrid

Share Follow edited May 16, 2013 at 9:51 Rohan Büchner asked Apr 4, 2012 at 10:45 Rohan BüchnerRohan Büchner 5,40355 gold badges6565 silver badges106106 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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 pare the results with another demo created for the answer.

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.

本文标签： javascriptJquery datepicker button tabindexStack Overflow