Question

我创建了一个日历，其中需要显示用户每天的总工作时间。看起来像这样：

显示H的任何位置，即显示小时的位置。

我创建了一个名为getTimeEntrysForDateRange的方法，其参数为：resourceID（它告诉我当前登录的用户），startDay，startMonth，startYear，lastDay，lastMonth，lastYear。

我能够使前4个参数正确，例如，如果我在9月的当前月份，则startDay，startMonth和startYear为8/30/2020。我从该日期开始的原因在代码中将很明显，并且在日历上也很明显（一周的开始从星期日开始），因此我创建了一个名为setDates（）的方法，该方法将使前一个星期日到达的开始。一个月。

当我在“网络”标签中检查该呼叫时，它将开始日期和结束日期都显示为2020年8月30日。我想让开始日期为日历上显示的firstSunday，然后我希望结束日期为10月3日的最后一个星期六（在这种情况下）。

注意：我每月只显示35天或5周。

我的ts代码

export class CalendarHoursComponent implements OnInit, OnDestroy {
  faAngleDoubleLeft = faAngleDoubleLeft;
  faAngleDoubleRight = faAngleDoubleRight;
  allDates = [];
  allMonths = [];
  resources: IResource[] = [];
  currentDate: Date = new Date();
  hours: ITimeEntry = null;
  firstSunday: Date;
  month = [
    "January",
    "Febuary",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December",
  ];

  constructor(
    private server: ServerService,
    private globals: GlobalsService,
    private modalService: NgbModal
  ) {}

  ngOnInit() {
    this.setDates();
    this.load();
  }

  ngOnDestroy() {
    try {
      this.modalService.dismissAll();
    } catch (err) {
      console.log(err);
    }
  }

  load() {
    let lastSaturday = this.firstSunday;
    lastSaturday.setDate(lastSaturday.getDate() + 31);
    debugger;
    this.server.getTimeEntrysForDateRange(
      this.globals.currentUser.id,
      this.firstSunday.getMonth(),
      this.firstSunday.getDate(),
      this.firstSunday.getFullYear(),
      lastSaturday.getMonth(),
      lastSaturday.getDate(),
      lastSaturday.getFullYear(),
      (r) => this.load2(r)
    );
  }

  private load2(d: any[]) {}

  showTimeEntries(d: Date) {
    CalendarTimeEntriesComponent.show(
      this.modalService,
      this.globals.currentUser.id,
      d
    )
      .then((r) => {})
      .catch((r) => {});
  }

  setDates() {
    this.firstSunday = this.currentDate;
    while (this.firstSunday.getDate() != 1) {
      this.firstSunday = new Date(
        this.firstSunday.getTime() - 24 * 60 * 60 * 1000
      );
    }
    while (this.firstSunday.getDay() != 0) {
      this.firstSunday = new Date(
        this.firstSunday.getTime() - 24 * 60 * 60 * 1000
      );
    }
    let temp = [];
    for (let i = 0; i < 35; i++) {
      let day = new Date(this.firstSunday.getTime() + 24 * 60 * 60 * 1000 * i);
      temp.push(day);
      if (temp.length % 7 == 0) {
        this.allDates.push(temp);
        temp = [];
      }
    }
    console.log(this.allDates);
  }

  addMonths(date: Date, months: number) {
    let d = date.getDate();
    date.setMonth(date.getMonth() + months);
    if (date.getDate() != d) {
      date.setDate(0);
    }
    return date;
  }

  currMonth() {
    return this.month[this.currentDate.getMonth()];
  }

  nextMonth() {
    this.currentDate = this.addMonths(this.currentDate, 1);
    this.allDates = [];
    this.setDates();
  }

  previousMonth() {
    this.currentDate = this.addMonths(this.currentDate, -1);
    this.allDates = [];
    this.setDates();
  }
}

我认为这无关紧要，但要全面，这里是html代码

<div class="row">
  <div class="col-12">
    <table
      class="table table-bordered table-fixed-header table-striped table-narrow"
    >
      <tr class="weekdays">
        <td>Sunday</td>
        <td>Monday</td>
        <td>Tuesday</td>
        <td>Wednesday</td>
        <td>Thursday</td>
        <td>Friday</td>
        <td>Saturday</td>
      </tr>

      <tr *ngFor="let w of allDates">
        <td class="days" (click)="showTimeEntries(d)" *ngFor="let d of w">
          <span class="top-left">{{d.getDate()}}</span>
          <h3>H</h3>
        </td>
      </tr>
    </table>
  </div>
</div>

Answer 1

问题在于Javascript Date是可变对象。在您的load()代码中，前几行是问题所在：

  load() {
    let lastSaturday = this.firstSunday;
    lastSaturday.setDate(lastSaturday.getDate() + 31);
    // ...
  }

这会将局部变量lastSaturday设置为指向内存中与Date相同的this.firstSunday对象。因此，在下一行，当您在其上调用.setDate()时，它将修改两个引用都指向的同一对象。

相反，您想要的是复制this.firstSunday的值，但获得一个全新的Date对象。一种方法是将另一个日期对象的数值传递给Date构造函数。

以下等同：

const lastSaturday = new Date(+this.firstSunday);
lastSaturday.setDate(lastSaturday.getDate() + 31);

const lastSaturday = new Date(this.firstSunday.valueOf());
lastSaturday.setDate(lastSaturday.getDate() + 31);

如何设置结束日期和开始日期？

1 个答案: