Displaying the original local time

[the-spyke]

I need to display departure and arrival times of a flight from New York (UTC-5) to Dallas (UTC-6) and I am currently in Paris (UTC+1). The dates come from an API as ISO formatted with an offset:

{
  "departure_dt": "2025-02-01T08:30:00-05:00",
  "arrival_dt": "2025-02-01T11:42:00-06:00"
}

On the screen I should see respectively:

Departure: 8:30 AM
Arrival: 11:42 AM

And not something like

Departure: 2:30 PM
Arrival: 6:42 PM

What is the intended way dealing with this in date-fns? I have only found suggestions to manually cut off the offset in the string.

[MILLERMARRU]

The right tool here is TZDate from @date-fns/tz, but there's a subtlety worth being precise about since I checked the actual constructor logic (src/date/mini.js in date-fns/tz, which TZDate extends): passing just the ISO string alone does not preserve its embedded offset.

constructor(...args) {
  super();
  if (args.length > 1 && typeof args[args.length - 1] === "string") {
    this.timeZone = args.pop();
  }
  ...
  } else if (typeof args[0] === "string") {
    this.setTime(+new Date(args[0]));
  }
  ...
}

With a single string argument, this.timeZone is never set (the args.length > 1 check fails), so it falls back to your system's local zone for display purposes, same problem as a plain Date. TZDate needs the zone/offset passed explicitly as the last argument, it doesn't parse the offset back out of the ISO string for you.

Since your offsets vary per record (-05:00 for the New York flight, -06:00 for the Dallas one) rather than being a single fixed zone, extract the offset from the string and pass it in explicitly:

import { TZDate } from "@date-fns/tz";
import { format } from "date-fns";

function toOriginalOffsetDate(isoString) {
  const match = isoString.match(/([+-]\d{2}:\d{2}|Z)$/);
  const offset = match ? (match[1] === "Z" ? "+00:00" : match[1]) : undefined;
  return new TZDate(isoString, offset);
}

const departure = toOriginalOffsetDate("2025-02-01T08:30:00-05:00");
const arrival = toOriginalOffsetDate("2025-02-01T11:42:00-06:00");

format(departure, "h:mm a"); // "8:30 AM"
format(arrival, "h:mm a");   // "11:42 AM"

This works no matter what zone the code runs in (Paris, a server in UTC, whatever), because TZDate carries its own fixed offset instead of deferring to Intl/system zone the way a plain Date always does. format (and the rest of date-fns) picks up TZDate's offset automatically through the constructDateFrom symbol it implements, no special-casing needed on the formatting side.

If you'd rather not regex the string yourself, TZDate.tz(offset, isoString) does the same thing (tz first, date second) and reads a bit more clearly at the call site once you've extracted the offset.

[the-spyke]

So, basically, the only way is to regex the string and either cutoff the timezone and use Date or extract the timezone and use TZDate.

I would argue that "ZoneLessDate" functionality should be in the library because the use case is quite common.