JS Date creating incorrect dates/JS Date confusion-CodePudding

I'm trying to build a custom datepicker. I am struggling in my understanding of JS Date, I need help to identify the gap however. I have some weirdness happening while trying to create dates using a for loop!

Basically I create a date, grab the # of days in the month, and create Date objects using a valid date string for display/processing using that number.

For some months (month # > 9 based on my testing), the 9th day is repeated, so the integer 10 doesn't make it into the date. The rest of the date is created 1 behind.

Code:

export const MinimalDatepicker = () => {
  // grab an arbitrary date for further use
  const today = new Date('2022-11-01');
  console.log('Month:', today.getMonth()   1);
  const daysInCurrentMonth = getDaysInMonth(today);
  const daysToShow: Date[] = [];
  Array.from(Array(daysInCurrentMonth).keys()).map((day) => {
    const date = new Date(`${today.getFullYear()}-${today.getMonth()   1}-${day   1}`);
    daysToShow.push(date);
  });
  console.log(daysToShow.map((d) => d.getDate()))

  return (
    <div>stuff</div>
  );
};

The outputted log for month # > 9 - note the duplicate 9 -- last day should be 31, not 30:

Month: 10
[1, 2, 3, 4, 5, 6, 7, 8, 9, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30]

If we roll back the month to 10, we see the issue no longer happens:

Month: 9
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30]

More confusion

I understand that in JS Date, month index starts at zero, so I use date.getMonth() 1 to "accurately" represent my current month, but I'm not sure how accurate it is.

In my date string example of 2022-11-01, when I call .getMonth(), I actually receive a date that is 2 integers behind the number used in the string; in the logs above, 2022-11-01 yields a month of 9 1 in the logs, such that 2022-01-01 actually yields a December date.

CodePudding user response：

I believe the issue you are facing is the result of malformed date strings (or at least it very well might be). getMonth and day are both numbers which means that when they are less than 10, they will be a single character string. 2022-1-1 is not a valid date for JS to parse. padStart can help format it correctly.

Try:

const date = new Date(`${today.getFullYear()}-${String(today.getMonth()   1).padStart(2, "0")}-${String(day   1).padStart(2, "0")}`);