How to display the value of a timestamp in standard time in four time zones using Intl.dateTimeFormat?

Question

I want to be able to display a timestamp in the time zone given by the user. I've noticed that even with a dedicated library like date-fns-tz it seems to return values ​​that don't make sense.

Behind the scenes they are apparently using Intl and when I use the module it doesn't seem to provide the correct value.

const zones = ['PST', 'MST', 'CST', 'EST'];
zones.forEach((timeZone) =>
  console.log(
    new Intl.DateTimeFormat('en-US', {
      timeZone,
      timeStyle: 'full',
      dateStyle: 'full',
    }).format(1588743894000)
  )
);

Output:

Tuesday, May 5, 2020 at 10:44:54 PM Pacific Daylight Time
Tuesday, May 5, 2020 at 10:44:54 PM GMT-07:00
Wednesday, May 6, 2020 at 12:44:54 AM Central Daylight Time
Wednesday, May 6, 2020 at 12:44:54 AM GMT-05:00

But shouldn't it be four different values?

Answer 1

You are specifying a three-letter time zone abbreviation, which expects the IANA time zone (https://tc39.es/ecma402/#sec-time-zone-names). I believe it's confused because you're passing the standard time zone during the day.

const zones = ["America/Los_Angeles", "America/Denver", "America/Chicago", "America/New_York"]
zones.forEach(timeZone => 
console.log(new Intl.DateTimeFormat('en-US', { timeZone, timeStyle: "full", dateStyle: "full"}).format(1588743894000)));

This will produce:

Tuesday, May 5, 2020 at 10:44:54 PM Pacific Daylight Time
Tuesday, May 5, 2020 at 11:44:54 PM Mountain Daylight Time
Wednesday, May 6, 2020 at 12:44:54 AM Central Daylight Time
Wednesday, May 6, 2020 at 1:44:54 AM Eastern Daylight Time