1

When finding a festivity that exists within an array of objects and when trying to print a user friendly message using toLocaleDateString I get the festivity date with one day less than when toLocaleDateString is executed

Please look at the following example

const date = "12/25/2020";
const [month, day, year] = date.split("/");
const newDate = `${year}-${month}-${day}`;
const holidays = [
  { celebration: "New year", date: "2020-12-31" },
  { celebration: "Christmas", date: "2020-12-25" },
  { celebration: "...", date: "2020-12-24" },
];
const holiday = holidays.find((holiday) => holiday.date === newDate);

if (holiday) {
  const { celebration, date } = holiday;
  const options = {
    month: "long",
    day: "2-digit",
  };
  const localDate = new Date(date).toLocaleDateString("en-US", options);
  const message = `Date ${date} coincides with the holiday ${celebration} in date ${localDate}. Do you want to continue?`;

  console.log(message);
}

I get Date 2020-12-25 coincides with the holiday Christmas in date December 24. Do you want to continue?

I expect Date 2020-12-25 coincides with the holiday Christmas in date December 25. Do you want to continue?

It's a subtle detail but i get 24 instead of 25

Mario
  • 4,784
  • 3
  • 34
  • 50
  • 1
    I think the issue is due to timezone. I am getting the right output. My timezone is IST. – Kaustubh Khare Aug 11 '20 at 04:57
  • When I rn this code in my browser it prints correctly `Date 2020-12-25 coincides with the holiday Christmas in date December 25. Do you want to continue?` – Asutosh Aug 11 '20 at 04:57
  • Try using `newDate` instead of `date` – Phil Aug 11 '20 at 04:58
  • I searched for `what is my timezone` in google and I got Central Standard Time – Mario Aug 11 '20 at 05:09
  • 1
    Phil I tried `newDate` instead of `date` `new Date(newDate).toLocaleDateString("en-US", options)` but I am getting the same result – Mario Aug 11 '20 at 05:10

1 Answers1

3

It most likely is due to the timezones. I would assume that you are based in the Americas.

When you create a date using Date(string) it creates the date using UTC, but when you're displaying it it shows the date in your own timezone, so any date west of UTC/GMT would show 2020-12-25T00:00Z as happening in 2020-12-24.

Also, parsing using Date can differ from implementation to implementation, so it's generally recommended using a library such as Moment.js to do the parsing (and can also handle timezones correctly).

Jimmy Stenke
  • 11,140
  • 2
  • 25
  • 20
  • Thanks for answering Jimmy. I will give it a try to momentjs – Mario Aug 11 '20 at 05:15
  • "*When you create a date using Date(string) it creates the date using UTC*" mostly, no. "2020-12-31" is parsed as UTC, but "12/25/2020" (and many other formats) is not. – RobG Aug 11 '20 at 10:08
  • @RobG, no, that is correct, but support for those are not a guarantee either. And, tbh, in my opinion should not be used. 12/25/2020 is easy, but say 10/11/2020 it means differently depending if you're in UK (d/m/y) or US (m/d/y), the parser can't know which one to use. The only supported formats in Date is ISO-8601 and by convention RFC 2822. All others are up to each engine and browser to interpret as they like, and generally not recommended to use because of the ambiguity. – Jimmy Stenke Aug 12 '20 at 09:20