Jquery datepicker button tabindex

Bin ich mit dem Jquery Datum/datetimepicker-add-on(s), sowie JQgrid.
Ich möchte das onShow für Datum/datetimepicker zu werden 'button', aber bei der Navigation mit der Tabulatortaste durch die modale, die date - /datetime-button darf sich nicht konzentrieren.

Iv ' E geschrieben, eine Funktion zu erstellen, die den datepicker für mich.

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: "_" });
}

Ich es so nennen.

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 } },

Sah ich, dass der datepicker macht wie diese

<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 meine erste Idee war die Riegel auf die button-Klasse und verwenden Jquery, um zu springen, um die nächste (Eingabe -) element auf der Seite, egal was es ist.

Habe ich versucht, ein paar Dinge, die nachgeben, entweder falsch/gar kein Ergebnis...

Meinem letzten gescheiterten Versuch...

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

Jede Hilfe wird sehr geschätzt.. a lot 🙂

InformationsquelleAutor Rohan Büchner | 2012-04-04
  1. 4

    Der direkteste Weg, um das problem zu lösen scheint mir, tabindex auf "-1": 

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

    Versuchen, verwenden Sie Tab in die Suche-Symbolleiste von die demo und vergleichen Sie die Ergebnisse mit eine weitere demo erstellt für die Antwort.

    • aha! ich habe versucht, die die tabindex-Eigenschaft -1, was früher, musste aber nee Idee, wie hängen Sie auf den button via jquery. vielen Dank für die Antwort wieder.
    • link ist gebrochen. auch die Einstellung tabindex scheint nicht zu funktionieren auf dem samsung galaxy s4.
    • Danke! es ist jetzt behoben.
    InformationsquelleAutor Oleg
  2. 1

    So meine erste Idee war die Riegel auf die button-Klasse und verwenden jQuery, um zu springen, um den nächsten input-element auf der Seite, egal was es ist.

    • Ich werde nicht Lügen, eurer Weisheit, die Ihr verwirrt mich.. :/
    InformationsquelleAutor Andrew
Schreibe einen Kommentar