jQuery datepicker 在不按下 CTRL 键的情况下更改按键上的日期

Question

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

• 左-> 移至前一天
• 右-> 移至第二天
• UPP -> 移至前一周
• 向下-> 移至下周

我有这个代码：

$(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??
});

如果这不是任何建议的方式是受欢迎的

谢谢

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');
    }
});

我希望这段代码有用

再见

Answer 2

您可以覆盖_doKeyDown函数并使用您自己的更改定义的行为。

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

如果出现以下情况，我已从请求的密钥代码中删除：

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/