javascript - 从停止处开始递增和递减日期

Question

这是我的 Controller :

private day: any = '';
private add: number = 0;
private remove: number = 0;
private days: any = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];

dayBefore() {
    let now = new Date();
    this.remove += 1;
    let newDate = this.decrementDays(now, this.remove);
    this.day = this.days[newDate.getDay()];
}

dayAfter() {
    let now = new Date();
    this.add += 1;
    let newDate = this.incrementDays(now, this.add);
    this.day = this.days[newDate.getDay()];
}

dayToday() {
    let now = new Date();
    this.day = this.days[now.getDay()];
    this.add = 0;
    this.remove = 0;
}

decrementDays: any = function removeDay(date: any, days: any) {
    return new Date(date.getFullYear(), date.getMonth(), date.getDate() - days, date.getHours(), date.getSeconds(), date.getMilliseconds());
};

incrementDays: any = function addDay(date: any, days: any) {
    return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days, date.getHours(), date.getSeconds(), date.getMilliseconds());
};

HTML:

<ul>
    <li (click)="dayBefore()"></li>
    <li (click)="dayToday()"></li>
    <li (click)="dayAfter()"></li>
</ul>

<span>{{day}}</span>

问题是，虽然递增和递减有效，但当我想在 dayAfter() 之后转到 dayBefore() 时，我不会转到日期就在前一天。

如果我点击dayAfter()，它将带我到星期二(如果今天是星期一)和 当我点击 dayBefore() 时，它会将我带到周日，而不是周一。我究竟该如何解决这个问题？我知道为什么会这样。这是因为它是从今天的日期(星期一)开始计数，而不是从我停止的地方开始计数。

谢谢大家。

Answer 1

@Component({
  // boilerplate and ceremony
})
export class DayOfWeekComponent {
  days = [
    "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"
  ];

  dayOfWeek = new Date().getDay();

  resetDayOfWeek() {
    this.dayOfWeek = new Date().getDay();
  }

  offsetDayOfWeek(offset: number) {
    let dayOfWeek = (this.dayOfWeek + offset) % 7;
    if (dayOfWeek < 0) {
      dayOfWeek += 7;
    }
    this.dayOfWeek = dayOfWeek;
  }
}

模板:

<ul>
    <li (click)="offsetDayOfWeek(-1)">Previous</li>
    <li (click)="resetDayOfWeek()">Today</li>
    <li (click)="offsetDayOfWeek(1)">Next</li>
</ul>

<span>{{days[dayOfWeek]}}</span>

https://plnkr.co/edit/7is6uMGtkvcQ5V4VzqYp?p=preview