Question

我正在使用Jquery date / datetimepicker附加组件以及JQgrid。我希望日期/日期时间选择器的onShow为'按钮'，但是当在模式中进行选项卡时，日期/日期时间按钮不能得到焦点。

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

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

我看到datepicker像这样呈现

<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跳转到页面上的下一个输入元素，无论它是什么。

Jquery datepicker按钮tabindex

2 个答案: