Adding durations in different timezones

[runjak]

Hi 👋,
I'm working on a website + server-side process using date-fns on both sides to compute dates using durations.
The idea is to gather and compute some data for a time window specified via duration data from an URL, and to have some of the related work also happening in the client.

Software on the server is executed with TZ=UTC, but browsers seem to generally abide by the rules of the systems TZ instead - which in my case is CET/CEST. Now of course when observing DST a day may not have 24h and so asking date-fns/add to subtract or add a day can lead to TZ related differences.

For example when computing add(new Date('2023-11-13T10:59:13.371Z'), { days: -16 }) in UTC the computation arrives at 2023-10-28T10:59:13.371Z, but a browser in CET will arrive at 2023-10-28T09:59:13.371Z instead.

I think generally this is expected behaviour and makes a lot of sense, but in my case I'd prefer having some kind of computation that aligns between clients and servers. It seems to me that the ways to get this would be:

• Perform all calculations that 'apply' durations to a date on the server to have only dates in clients.
  • This seems fragile and limiting because we'd than have functions that are magically not allowed to run in clients. Sure there could be dedicated guards in CI/CD to make sure no misuse happens, but I wouldn't prefer it.
• Have an add function for durations that behaves in a manner independent of the local TZ (for example by always using UTC).
  • The alignment of times in client and server here is more important for me than whether '-1 day' is correct for the local timezone.

So my understanding is that I cannot easily escape Browsers applying their knowledge of DST to dates. I did also not find specific tools for this in date-fns so far. I've also had a look at date-fns/utc in hope that it might aid me but this seems to not be the case.

Because of this I've been looking into building an addDuration function that ignores the local TZ, and I'm currently at something like this:

const addDuration = (date, delta) => {
  const { years = 0, months = 0, weeks = 0, days = 0, hours = 0, minutes = 0, seconds = 0 } = delta

  const dateWithMonths = add(date, { months, years })
  const tzDeltaMonths = date.getTimezoneOffset() - dateWithMonths.getTimezoneOffset()

  const dateWithDays = add(dateWithMonths, { days, weeks })
  const tzDeltaDays = dateWithMonths.getTimezoneOffset() - dateWithDays.getTimezoneOffset()

  return add(dateWithDays, { hours, minutes: minutes + tzDeltaMonths + tzDeltaDays, seconds })
}

I've been comparing it with date-fns/add using the following expression:

console.table(
  examples.map(({ start, delta, utc }) => {
    const add1 = add(new Date(start), delta)
    const ok1 = add1.toISOString() === utc ? '✅' : '❌'
    const add2 = addDuration(new Date(start), delta)
    const ok2 = add2.toISOString() === utc ? '✅' : '❌'

    return { start: new Date(start), delta, utc: new Date(utc), add1, ok1, add2, ok2 }
  }),
)

Full example here: example.zip

Running the example with TZ=UTC node example.js I got:

Running the example with TZ=CET node example.js I got:

So… looking at this right now I'm wondering:

• Does this whole approach I'm trying to take make sense or am I missing something central/crucial here?
• Is there already a way to add durations to a date that can be used to always do this the same way across browsers?

I think my example is not quite working as I'd hoped yet - I'll be fiddling with it a little more, but thought it also helpful to seek conversation.

[runjak]

I've also had a look at https://www.npmjs.com/package/date-fns-tz but no luck with it.

I've also asked a related question on StackOverflow: https://stackoverflow.com/questions/77488561/adding-durations-to-dates-in-a-manner-stable-across-timezones

[runjak]

I think I've found a solution to what I was looking for:

export const addDuration = (date: Date, delta: Duration): Date => {
  const { years = 0, months = 0, weeks = 0, days = 0, hours = 0, minutes = 0, seconds = 0 } = delta

  const utcYears = date.getUTCFullYear()
  const utcMonths = date.getUTCMonth()
  const utcDays = date.getUTCDate()
  const utcHours = date.getUTCHours()
  const utcMinutes = date.getUTCMinutes()
  const utcSeconds = date.getUTCSeconds()
  const utcMilliseconds = date.getUTCMilliseconds()

  return new Date(
    Date.UTC(
      utcYears + years,
      utcMonths + months,
      utcDays + weeks * 7 + days,
      utcHours + hours,
      utcMinutes + minutes,
      utcSeconds + seconds,
      utcMilliseconds,
    ),
  )
}

This seems to add Durations in UTC just fine and appears to be working across clients.