如何编写一个 function 可以使用 date-fns 正确地将小时和天添加到目标时区？

Question

Lets say I have a timestamp with the IANA time zone identifier:

2021-11-07T00:00:00-04:00[America/New_York]

Note : This timestamp is 2 hours away from transitioning from DST to standard time.

I want to write a function that can take the timestamp, time zone identifier and a Duration , and return a new "future" timestamp in the target timezone.

For instance:

zonedAddDuration("2021-11-07T00:00:00-04:00", "America/New_York", {
  days: 1
})
// => "2021-11-08T00:00:00-05:00"

zonedAddDuration("2021-11-07T00:00:00-04:00", "America/New_York", {
  hours: 5
})
// "2021-11-07T04:00:00-05:00"

I seem to have found a way to make zonedAddDuration handle both these scenarios, but not at the same time :

import { add, Duration, parseISO } from "date-fns";
import {
  utcToZonedTime,
  format as formatTz
} from "date-fns-tz";

// Handles "hours" scenario (also minutes and seconds)
export const zonedAddDuration1 = (
  isoDateStr: string,
  zoneIana: string,
  duration: Duration
) => {
  const startDate = parseISO(isoDateStr);

  const futureDate = add(startDate, duration);
  const zonedTime = utcToZonedTime(futureDate, zoneIana);

  return formatTz(zonedTime, "yyyy-MM-dd'T'HH:mm:ssXXXzzz", {
    timeZone: zoneIana
  });
};

// handles "days" scenario (also months, weeks, years)
export const zonedAddDuration2 = (
  isoDateStr: string,
  zoneIana: string,
  duration: Duration
) => {
  const startDate = parseISO(isoDateStr);

  const zonedTime = utcToZonedTime(startDate, zoneIana);
  const futureDate = add(zonedTime, duration);

  return formatTz(futureDate, "yyyy-MM-dd'T'HH:mm:ssXXXzzz", {
    timeZone: zoneIana
  });
};

As you might notice, the only difference between zonedAddDuration1 and zonedAddDuration2 is the order in which I use utcToZonedTime . I need this function to be general purpose, and should handle all kinds of durations correctly, including DST transitions. I should add that the local timezone of the system should not matter, I want the same results regardless of where I run this code .

I think my understanding of date-fns-tz might be lacking, I've read the documentation many times and still not sure I'm grasping it correctly.

If it is not possible to write such a function, then any help understanding why it behaves as it does would be appreciated (why the ordering matters).

I've been experimenting in this Codesandbox (which includes the 2 test scenarios): https://codesandbox.io/s/exciting-fog-tke86?file=/src/dateUtil.ts

Answer 1

I found a way that will add durations correctly for both dates and times. What I did was to split the input duration in to a time duration and a date duration , and add those to the input date separately. This way I can apply the utcToZonedTime in the correct order for both scenarios.

All this feels like a hack though, and I'm still not sure why it works (or even if it works as expected for all concievable scenarios).

import { add, Duration, parseISO } from "date-fns";
import {
  utcToZonedTime,
  format as formatTz
} from "date-fns-tz";

export const zonedAddDuration = (
  isoDateStr: string,
  zoneIana: string,
  duration: Duration
) => {
  const startDate = parseISO(isoDateStr);
  const dateDuration: Duration = {
    years: duration.years ?? 0,
    months: duration.months ?? 0,
    weeks: duration.weeks ?? 0,
    days: duration.days ?? 0
  };
  const timeDuration: Duration = {
    hours: duration.hours ?? 0,
    minutes: duration.minutes ?? 0,
    seconds: duration.seconds ?? 0
  };
  const futureDateTime = add(startDate, timeDuration);
  const zonedTime = utcToZonedTime(futureDateTime, zoneIana);
  const futureDate = add(zonedTime, dateDuration);

  return formatTz(futureDate, "yyyy-MM-dd'T'HH:mm:ssXXXzzz", {
    timeZone: zoneIana
  });
};

Here is a Codesandbox with the working version plus tests.