按下键盘上的CTRL键，无需更改jQuery日期选择器上的日期

Question

我使用一个日期选择器，文档上说我们可以在按键时更改日期（例如 CTRL+LEFT: 移动到前一天）....但我想在以下情况下更改日期：

• LEFT -> 移动到前一天
• RIGHT-> 移动到后一天
• UPP-> 移动到前一周
• DOWN -> 移动到后一周

这是我的代码：

$(document).on('focus', '.datepicker',  function() {
    $(this).datepicker({ dateFormat: "dd-mm-yy" }).attr('readonly','readonly');
    if($(this).val()=='') $(this).val($.datepicker.formatDate('dd-mm-yy', new Date()));
    // how can I activate a crtl key??
});
$(document).on('focusout', '.datepicker',   function() {
    // how can I deactivate a crtl key??
});

如果这不是正确的方法，欢迎提出任何建议。

谢谢。

- Francesco G.

---

我认为唯一的方法是扩展小部件并创建自己的_doKeyDown函数。 - Irvin Dominin

Answer 1

非常感谢您……您给了我灵感……我通过以下代码解决了这个问题：

$(document).on('focus', '.datepicker',  function() {
    $(this).datepicker({
        dateFormat: "dd-mm-yy"                  
    });
    if($(this).val()=='') $(this).val($.datepicker.formatDate('dd-mm-yy', new Date()));
});

$(document).on('keydown', '.datepicker',    function() {
    $.datepicker.customKeyPress(event);
});

$.extend($.datepicker, { // Extends datepicker with shortcuts.
    customKeyPress: function (event) {
        var inst = $.datepicker._getInst(event.target);
        var isRTL = inst.dpDiv.is(".ui-datepicker-rtl");
        switch (event.keyCode) {
            case 37:    // LEFT --> -1 day
                $('body').css('overflow','hidden');
            $.datepicker._adjustDate(event.target, (isRTL ? +1 : -1), "D");
            break;
        case 38:    // UPP --> -7 day
            $('body').css('overflow','hidden');
            $.datepicker._adjustDate(event.target, -7, "D");
            break;
        case 39:    // RIGHT --> +1 day
            $('body').css('overflow','hidden');
            $.datepicker._adjustDate(event.target, (isRTL ? -1 : +1), "D");
            break;
        case 40:    // DOWN --> +7 day
            $('body').css('overflow','hidden');
            $.datepicker._adjustDate(event.target, +7, "D");
            break;
        }
        $('body').css('overflow','visible');
    }
});

我希望这段代码有用。

再见。

- Francesco G.

---

你甚至可以保持现有的控件不变，像你的回答一样添加箭头键支持。无论如何，这太棒了 :) - TryinHard

Answer 2

你可以重写_doKeyDown函数，并使用自己的定义更改其行为。

如果您想通过跳过CTRL测试以不同方式处理键代码37、38、39、40，则可以从jQuery UI日期选择器中复制默认的_doKeyDown并根据需要更改该函数。

我已经从请求的键代码中删除了起始if语句：

if (event.ctrlKey || event.metaKey) {

所以代码直接是动作，无需按下Ctrl键。

代码：

$.extend($.datepicker, {
     _doKeyDown: function(event) {
        var onSelect, dateStr, sel,
            inst = $.datepicker._getInst(event.target),
            handled = true,
            isRTL = inst.dpDiv.is(".ui-datepicker-rtl");
        inst._keyEvent = true;
        if ($.datepicker._datepickerShowing) {
            switch (event.keyCode) {
                case 9: $.datepicker._hideDatepicker();
                        handled = false;
                        break; // hide on tab out
                case 13: sel = $("td." + $.datepicker._dayOverClass + ":not(." +
                                    $.datepicker._currentClass + ")", inst.dpDiv);
                        if (sel[0]) {
                            $.datepicker._selectDay(event.target, inst.selectedMonth, inst.selectedYear, sel[0]);
                        }

                        onSelect = $.datepicker._get(inst, "onSelect");
                        if (onSelect) {
                            dateStr = $.datepicker._formatDate(inst);

                            // trigger custom callback
                            onSelect.apply((inst.input ? inst.input[0] : null), [dateStr, inst]);
                        } else {
                            $.datepicker._hideDatepicker();
                        }

                        return false; // don't submit the form
                case 27: $.datepicker._hideDatepicker();
                        break; // hide on escape
                case 33: $.datepicker._adjustDate(event.target, (event.ctrlKey ?
                            -$.datepicker._get(inst, "stepBigMonths") :
                            -$.datepicker._get(inst, "stepMonths")), "M");
                        break; // previous month/year on page up/+ ctrl
                case 34: $.datepicker._adjustDate(event.target, (event.ctrlKey ?
                            +$.datepicker._get(inst, "stepBigMonths") :
                            +$.datepicker._get(inst, "stepMonths")), "M");
                        break; // next month/year on page down/+ ctrl
                case 35: if (event.ctrlKey || event.metaKey) {
                            $.datepicker._clearDate(event.target);
                        }
                        handled = event.ctrlKey || event.metaKey;
                        break; // clear on ctrl or command +end
                case 36: if (event.ctrlKey || event.metaKey) {
                            $.datepicker._gotoToday(event.target);
                        }
                        handled = event.ctrlKey || event.metaKey;
                        break; // current on ctrl or command +home
                case 37:    $.datepicker._adjustDate(event.target, (isRTL ? +1 : -1), "D");

                        handled = event.ctrlKey || event.metaKey;
                        // -1 day on ctrl or command +left
                        if (event.originalEvent.altKey) {
                            $.datepicker._adjustDate(event.target, (event.ctrlKey ?
                                -$.datepicker._get(inst, "stepBigMonths") :
                                -$.datepicker._get(inst, "stepMonths")), "M");
                        }
                        // next month/year on alt +left on Mac
                        break;
                case 38:    $.datepicker._adjustDate(event.target, -7, "D");

                        handled = event.ctrlKey || event.metaKey;
                        break; // -1 week on ctrl or command +up
                case 39:    $.datepicker._adjustDate(event.target, (isRTL ? -1 : +1), "D");

                        handled = event.ctrlKey || event.metaKey;
                        // +1 day on ctrl or command +right
                        if (event.originalEvent.altKey) {
                            $.datepicker._adjustDate(event.target, (event.ctrlKey ?
                                +$.datepicker._get(inst, "stepBigMonths") :
                                +$.datepicker._get(inst, "stepMonths")), "M");
                        }
                        // next month/year on alt +right
                        break;
                case 40:    $.datepicker._adjustDate(event.target, +7, "D");

                        handled = event.ctrlKey || event.metaKey;
                        break; // +1 week on ctrl or command +down
                default: handled = false;
            }
        } else if (event.keyCode === 36 && event.ctrlKey) { // display the date picker on ctrl+home
            $.datepicker._showDatepicker(this);
        } else {
            handled = false;
        }

        if (handled) {
            event.preventDefault();
            event.stopPropagation();
        }
         }
});

原始的jQuery UI日期选择器代码：https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.datepicker.js#L568

演示：http://jsfiddle.net/IrvinDominin/7ck7D/

- Irvin Dominin

---

我最终通过遵循你的示例来覆盖按键，因为执行以下操作似乎只对第一个加载的日期选择器起作用： $(id).keyup(...).keydown(...).datepicker(...) - Ultroman the Tacoman