2012-04-04 31 views
6

Estoy usando los complementos de Jquery date/datetimepicker, así como JQgrid. Me gustaría que onShow para la fecha/datetimepicker sea 'botón', pero cuando se selecciona el modal, el botón de fecha/fecha y hora no debe enfocar.Jquery datepicker button tabindex

He escrito una función para crear el datepicker para mí.

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

Lo llamo así.

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

código jqGrid

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

vi que el selector de fechas hace como esto

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

Así que mi idea inicial era aferrarse a la clase de botón y utilizar jQuery para salta al siguiente elemento (entrada) en la página, independientemente de lo que sea.

he intentado un par de cosas, todos los que producen incorrectas/ningún resultado en absoluto ...

Mi último intento fallido ...

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

será apreciado Cualquier ayuda .. un montón :)

Respuesta

3

La forma más directa para resolver el problema me parece fijar tabindex a "-1":

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

Intente utilizar Tab en la barra de herramientas de búsqueda de the demo y comparar los resultados con another demo creada para the answer.

+1

aha! Probé la cosa del tabindex -1 antes, pero no tenía idea de cómo agregarlo al botón a través de jquery. gracias por la respuesta otra vez –

+0

@Yenros: ¡De nada! – Oleg

+0

ese enlace está roto. además, configurar tabindex no parece funcionar en samsung galaxy s4. –

1

Así que mi idea inicial fue aferrarse a la clase de botón y usar jQuery para saltar al siguiente elemento de entrada en la página, independientemente de lo que sea.

+3

No mentiré, tu sabiduría me confunde ...:/ –