jquery datepicker button tabindex

Question

我正在使用Jquery date/datetimepicker加载项以及JQgrid。 我想onShow的日期/ datetimepicker是'按钮'，但是当通过模式选项卡时，日期/日期时间按钮不能获得焦点。

Iv'e写了一个函数来为我创建日期选择器。

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

我这样称呼它。

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

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

我看到日期选择器呈现这样

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

所以我最初的想法是闩锁按钮级和使用jQuery跳到页面上的下一个（输入）元素，而不管它是什么。

我试了几件事情，所有的收益可能不正确，/没有结果在所有...

我最后尝试失败...

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

任何帮助将不胜感激..很多:)

Answer 1

最直接的方法来解决这个问题，似乎我设置tabindex为“-1”：

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

尝试使用标签的the demo搜索工具栏，并将结果与​​创建another demo比较the answer。

Answer 2

所以我最初的想法是锁定到按钮类，并使用jQuery跳转到页面上的下一个输入元素，而不管它是什么。