Question

我正在开发一个日期选择器，日期选择器应该有三个部分

PREV DAY            TODAY             NEXT DAY

TODAY最初显示今天的日期，但如果用户在第二天点击，则会将其更改为第二天的日期。

例如

< 25th Jan 2018               26th Jan 2018           27th Jan 2018 >

当他们点击“2018年1月27日”时，这三个部分应该以这种方式改变

< 26th Jan 2018               27th Jan 2018           28th Jan 2018 >

我正在使用Moment JS并且到目前为止已经这样做了：

<div class="tracker-day-picker">
    <div class="adjacent-day previous-day"><span>Prev</span></div>
    <div class="day current-day"><span>Current</span></div>
    <div class="adjacent-day next-day"><span>Next</span></div> 
</div>

JavaScript代码：

$(document).ready(function(){
  var currentDate = moment();

  tracker_picker_update( currentDate );

  $(".previous-day").on("click", function(){
    currentDate = currentDate.subtract(1, "day");
    tracker_picker_update( currentDate );
  });

  $(".next-day").on("click", function(){
    currentDate = currentDate.add(1, "day");
    tracker_picker_update( currentDate );
  });

});


function tracker_picker_update( currentDate ) {
  var tracker_picker = $(".tracker-day-picker");

  // Set current Date
  tracker_picker.find(".current-day span").text( currentDate.format("DD MMM Y") );

  // Set previous Date
  tracker_picker.find(".previous-day span").text( currentDate.subtract(1, "day").format("DD MMM Y") );

  // Set Next Date
  tracker_picker.find(".next-day span").text( currentDate.add(1, "day").format("DD MMM Y") );

  return true;
}

对于某些部分，它似乎工作正常，如果我喜欢previous-day元素，它可以正常工作，当前日期将使用点击日期更新，并在previous-day元素前一天更新单击的日期已更新。

问题出现在next-day元素上。

这是一个例子： http://jsbin.com/yejoful

Answer 1

Moment对象是可变的，因此当您使用add和subtract时，您可以修改原始对象的值。

您可以在使用clone()修改其值之前克隆时刻对象：

所有时刻都是可变的。如果你想要克隆片刻，你可以隐式或明确地这样做。

暂时致电moment()将克隆它。

此外，您可以致电moment#clone克隆片刻。

获取今天，昨天和下一天的日期并在这些日期之间切换

1 个答案: