How can I adjust this function to work with daylight savings?

Question

I was using this example to create a calendar in angular. But I realized today that when DST Ends the date is repeated and then the days are off by one from then on.

Look at the stackblitz. November 7 is repeated. stackblitz link to calendar

This is the code that generates the calendar days. How do I adjust this so that DST doesn't mess everything up?

  private getCalendarDays(date = new Date) {
var startDate;

startDate = this.getCalendarStartDay(date).getTime();


 const calendarStartTime =  startDate;
    return this.range(0, 41)
      .map(num => new Date(calendarStartTime + DAY_MS * num));
  }

  private getCalendarStartDay(date = new Date) {
    const [year, month] = [date.getFullYear(), date.getMonth()];
    const firstDayOfMonth = new Date(year, month, 1).getTime();

    return this.range(1,7)
      .map(num => new Date(firstDayOfMonth - DAY_MS * num))
      .find(dt => dt.getDay() === 0)
  }

  private range(start, end, length = end - start + 1) {
    return Array.from({ length }, (_, i) => start + i)
  }

@skyBlue In StackBlitz, I see that the number 7 appears both on Sunday and Monday — JeffryHouser, Nov 07 '21 at 12:09
This is a bit generic, but my impulse is to loop over a list of integers to create the month display. Get the first day of the month to find the first day; add 1 month, then subtract 1 day to get the last day of the month. I'm not sure why time needs to come into this equation to create the display. The fact that you're getting the list of dates by doing a ms calculation is the issue as you learned. Because of daylight savings time, not every day has the same number of ms in it. — JeffryHouser, Nov 07 '21 at 12:16
Adding days using milliseconds per day (which is what I assume *DAY_MS* represents) will cause errors in places where daylight saving is observed because not all days are 24 hours long. See [*How can I add 1 day to current date?*](https://stackoverflow.com/questions/9989382/how-can-i-add-1-day-to-current-date/9989458#9989458) — RobG, Nov 08 '21 at 00:44

score 0 · Accepted Answer · answered Nov 07 '21 at 19:53

I'm not pretty sure but I imagine you can get the dates at 12 a.m. to avoid the problem

  private getCalendarStartDay(date = new Date) {
    const [year, month] = [date.getFullYear(), date.getMonth()];

    //see that I indicate the 1 of the month at 12:00:00
    const firstDayOfMonth = new Date(year, month,1,12,0,0,0).getTime();

    //well the range from 0 to 6
    return this.range(0,6)
      .map(num => new Date(firstDayOfMonth - DAY_MS * num))
      .find(dt => dt.getDay() === 0)
  }

NOTE: I got your error in october, not in november

`new Date(year, month,1,12,0,0,0)` creates a date for noon (12:00:00), which is commonly (though erroneously) represented as 12 pm. The use of 12 am is commonly for midnight or 00:00. — RobG, Nov 08 '21 at 00:41

How can I adjust this function to work with daylight savings?

1 Answers1