Question

我有一个问题......

我使用了一个datepicker和文档说我们可以在按键上更改日期（es。 CTRL + LEFT ：移动到前一天）....但是我想要在这种情况下更改日期：

LEFT - ＆gt;移至前一天
右 - ＆GT;移至第二天
UPP - ＆GT;移至上一周
DOWN - ＆gt;移至下周

我有这段代码：

$(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：

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 datepicker代码：https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.datepicker.js#L568

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

按下CTRL键时，按键上的jQuery datepicker更改日期

2 个答案: