jQuery datepicker change date on keypress without CTRL key pressed

Question

I use a datepicker and documentation says we can change the date on keypress (es. CTRL + LEFT : Move to the previous day) .... but I would like change date in this case:

• LEFT -> Move to the previous day
• RIGHT -> Move to the next day
• UPP -> Move to the previous week
• DOWN -> Move to the next week

I've this code:

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

If this isn't the way any suggestion is welcome

Thanks

Answer 1

Thank so much ... You have inspired me ... I solved by this code:

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

I hope this code is useful

Bye

Answer 2

You can override the _doKeyDown function and changing the defined behavior with your own.

You want to handle differently the key code 37, 38, 39, 40 by skipping the CTRL test; so you can copy the default _doKeyDown from jQuery UI date picker and change the function as you wish.

I have removed from the requested key code the starting if:

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

so the code is directly the action without the ctrl key pressed.

Code:

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

Original jQuery UI datepicker code: https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.datepicker.js#L568

Demo: http://jsfiddle.net/IrvinDominin/7ck7D/