JQuery tabindex dump button

Question

I am using the jQuery date / datetimepicker add-in as well as JQgrid. I would like onShow for date / datetimepicker to be 'button', but when entering text in the module, the date / date and time button should not focus.

Iv'e wrote a function to create a 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 the following.

 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 datepicker is displayed as follows

 <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 lock the button class and use jQuery to go to the next (input) element on the page, no matter what it is.

I tried a couple of things, all of which are either incorrect or have no results at all ...

My last unsuccessful attempt ...

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

Any help would be appreciated .. a lot :)

Answer 1

The most direct way to solve the problem is to set tabindex to "-1":

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

Try using Tab on the demo search toolbar and compare the results with another demo created for.

Answer 2

So, my initial idea was to lock the button class and use jQuery to go to the next input element on the page, no matter what it is.