Jquery Datepicker Button Tabindex

Question

Ich benutze die JQuery Datum/Datetimepicker Add-on (s), sowie JQgrid. Ich möchte, dass die onShow für das Date/Datetimepicker 'Button' ist, aber wenn man durch das Modal Tabbing, darf die Datum/Date-Taste nicht den Fokus bekommen.

Ich habe eine Funktion geschrieben, um den Datepicker für mich zu erstellen.

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 nenne es so.

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 die Datepicker wie das so war meine erste Idee

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

macht auf die Schaltfläche Klasse andocken und verwenden JQuery Zum nächsten (Eingabe-) Element auf der Seite springen, unabhängig davon, was es ist.

Ich habe ein paar Dinge ausprobiert, die alle etwas entweder nicht in Ordnung/keine Ergebnisse auf allen ...

Mein letzten gescheiterten Versuch ...

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

Jede mögliche Hilfe geschätzt .. viel :)

Answer 1

Der direkteste Weg, um das Problem zu lösen scheint mir tabindex zu auf „-1“:

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

Try Tab in der Suchleiste von the demo und vergleichen die Ergebnisse mit another demo für erstellt verwenden the answer.

Answer 2

So war meine ursprüngliche Idee, an die Schaltfläche Klasse zu hängen und jQuery verwenden, um zum nächsten Eingabeelement auf der Seite zu springen, unabhängig davon, was es ist.