javascript - 为什么我在 Angular2+ 中尝试填充自定义日历时会在 11 月得到两个日期/时间

问题描述

我的任务是创建一个日历。在我的代码中，我有获取当前、下个月和上个月的方法。在我的 setDates 方法中，您可以看到我将月初的前一个星期日作为一周中的一天开始。然后，我将日历填充 6 周 (6 x 7)，总共 42 天。

例如，每当我进入 11 月份时，它都会显示两个 11 月 1 日。当我安慰这几天的事情时，我得到了这个：

0: Sun Nov 01 2020 00:32:54 GMT-0500 (Central Daylight Time) {}
1: Sun Nov 01 2020 23:32:54 GMT-0600 (Central Standard Time) {}
2: Mon Nov 02 2020 23:32:54 GMT-0600 (Central Standard Time) {}
3: Tue Nov 03 2020 23:32:54 GMT-0600 (Central Standard Time) {}
4: Wed Nov 04 2020 23:32:54 GMT-0600 (Central Standard Time) {}
5: Thu Nov 05 2020 23:32:54 GMT-0600 (Central Standard Time) {}
6: Fri Nov 06 2020 23:32:54 GMT-0600 (Central Standard Time) {}

看起来那是夏令时的时候。所以在我的日历上，它填充了两天，显示 11 月 1 日，然后移动到 11 月 2 日，这不是我想要的。我该如何解决这个问题以考虑夏令时？我是否需要创建一个方法并以某种方式检查日期是否是夏令时？

我的 .html 文件

<div class="row">
    <div class="col-12">
        <table class='table  table-striped table-narrow'>
            <tr class='month'>
               <td >
                <fa-icon style="padding-left: 30px;" [icon]="faAngleDoubleLeft"  class='month_prev'(click)="previousMonth()"></fa-icon>
               </td>
                <td>
                  {{ currMonth() }}
                </td>
                <td>
                    <fa-icon style="padding-right: 30px;" [icon]="faAngleDoubleRight" class ='month_next'(click)="nextMonth()"></fa-icon>
                </td>
            </tr>
        </table>
    </div>
</div>
<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">
                    {{d.getDate()}}
                </td>
            </tr>
        </table>
    </div>
</div>

.ts 文件

export class CalendarHoursComponent implements OnInit, OnDestroy {
  faAngleDoubleLeft=faAngleDoubleLeft;faAngleDoubleRight=faAngleDoubleRight; allDates = []; allMonths = [];
  resources: IResource[]=[]; resourceId: IResource = null;
  currentDate: Date = new 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();
  }

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

 

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

  setDates() {
    let firstSunday = this.currentDate;
    while (firstSunday.getDate() != 1) {
      firstSunday = new Date(firstSunday.getTime() - (24 * 60 * 60 * 1000));
    }
    while (firstSunday.getDay() != 0) {
      firstSunday = new Date(firstSunday.getTime() - (24 * 60 * 60 * 1000));
    }
    let temp=[];
    for (let i = 0; i < 42; i++) {
      let day = new Date(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();
  }

}

标签： javascriptangulardate

javascript - 为什么我在 Angular2+ 中尝试填充自定义日历时会在 11 月得到两个日期/时间

问题描述

解决方案

推荐阅读