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

Answer 2

您可以使用此library，这是非常有用的方法。

寻找由向上和向下箭头键操作的日期小部件以增加日期

2 个答案: