javascript - 寻找一个通过向上和向下箭头键操作的日期小部件来增加日期

Question

我知道一些日历小部件，但它们的功能超出了我的需要。

我想要的只是一个包含今天日期的文本字段，并且能够通过按向上或向下箭头键来添加或减去一天。

我知道键码 40 表示向下，38 表示向上，以及 onkeydown 事件，但不知道如何将它们组合在一起以形成一个功能字段。我想这样开始:

<input type="text" value="<?php echo date('d.m.Y',mktime(date('H'))); ?>" onkeydown="keydownFunction()">
<script type="text/javascript">
function ArrowFun() {
    switch (window.event.keyCode) {
        case 38: ... +1 day
        break;
        case 40: ... -1 day
        break;
        }
    }
</script>

是否有一个小部件已经可以做到这一点(尽管我不希望弹出日历)？我会选择一个带有鼠标操作箭头图标的小部件，这也可以实现相同的功能。

非常感谢任何帮助。

Answer 1

使用MomentJS和 jQuery

$(function() {
   var now = moment(); //Makes now a new moment, you could feed this the PHP date if needed as well...
   $('#dateBox').val(now.format('D.M.YYYY')); //Formats the date
   $('body').keydown(function(e) { //You can update the selector to #dateBox to refine it.
    switch(e.which) {
        case 38: // up
           $('#dateBox').val(now.add(1,'Day').format('D.M.YYYY'));
        break;

        case 40: // down
           $('#dateBox').val(now.subtract(1,'Day').format('D.M.YYYY'));
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
        });
});

JSFiddle