Question

我尝试制作日期选择功能，用户点击按钮，日期转到昨天或明天。我使用了moment.js（http://momentjs.com/）。我想如果我创建一个变量并将其存储在.add方法中，那么我就可以通过jQuery单击来修改变量。我不知道该怎么做。这就是我到目前为止所拥有的：

var n = 0;

var displayDate = moment().add(n, 'days').format('MMMM Do');

$(".left-arrow").click(function(){
    n++;
    return displayDate;
});

Answer 1

您可以尝试此https://jsfiddle.net/oL28ffya/

HTML

<div id="foo"></div>
<div class="left-arrow">Left (-)</div>
<div class="right-arrow">Right (+)</div>

JS

var displayDate = moment()
$('#foo').text(displayDate.format('MMMM Do'))

$(".left-arrow").click(function(){
    $('#foo').text(displayDate.add(-1, 'days').format('MMMM Do'));
});

$(".right-arrow").click(function(){
    $('#foo').text(displayDate.add(1, 'days').format('MMMM Do'));
});

您不需要变量来存储更改，当用户向右或向左单击时，我们通过添加/减去1并显示它来更新新日期

Answer 2

您的代码有点不完整。要获得日期转换器，以下内容适用于您：

$('#foo').html(moment().format('MMMM Do'))
$(".datechange").on('click', function(){
    var d = moment($('#foo').text(), 'MMMM Do'); // parse the current date
    $('#foo').html(d.add($(this).data("datechange"), 'days').format('MMMM Do')); // update the content with the new date
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo"></div>
<button class="datechange" data-datechange="-10">-10
</button>
<button class="datechange" data-datechange="-1">-1
</button>
<button class="datechange" data-datechange="1">+1
</button>
<button class="datechange" data-datechange="10">+10
</button>

如何通过使用moment.js更改变量来更改日期？

2 个答案: