Native timezone support vs. date-fns-tz

[yss14]

Are there any differences or benefits of using the new native timezone support in companion with @date-fns/tz compared to date-fns-tz?
What we identified so far is that the new API makes our code more complex if you are given a date from an API for example in UTC and want to do some date calculations in a different timezone, before converting the result back to UTC again.

const timezone = 'CET'
const from = parseISO('2024-11-30T23:00:00.000Z')

// date-fns-tz
const endOfDay = fromZonedTime(endOfDay(toZonedTime(from, timezone)), timezone)

// @date-fns/tz
const endOfDay = new TZDate(endOfDay(new TZDate(from, 'UTC').withTimeZone(timezone)), timezone).withTimeZone('UTC')

Or do I miss something here on the new API?
One reason for that is, that passing a TZDate to date-fns functions returns a plain JS Date and not a TZDate I guess.

[kossnocorp]

Hey!

I think you missed it, but the date-fns functions do return the date in the same type as you pass inside:

const date = startOfMinute(endOfDay(new TZDate(from, timezone)));

date.toString();
//=> 'Sun Dec 01 2024 23:59:00 GMT+0100 (GMT+01:00)'

date instanceof TZDate;
//=> true

Additionally, I don't think the code does what you think it should. In the @date-fns/tz calling withTimeZone and passing "UTC" does nothing but convert the time zone without changing the timestamp, while fromZonedTime and toZonedTime do change it:

const timezone = "CET";
const from = parseISO("2024-11-30T23:00:00.000Z");
//=> '2024-11-30T23:00:00.000Z'

const zonedFrom = toZonedTime(from, timezone);
//=> '2024-11-30T16:00:00.000Z'

const eod = endOfDay(zonedFrom);
//=> '2024-12-01T15:59:59.999Z'

const fromZoned = fromZonedTime(eod, timezone);
//=> '2024-12-01T22:59:59.999Z'

With date-fns to achieve that, you would use transpose function:

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

// Singapore is the system time zone:
const sgDate = new Date(2024, 8 /* Sep */, 7, 6, 5, 4);
//=> 'Wed Sep 07 2024 06:05:04 GMT+0800 (Singapore Standard Time)'

// Transpose the date to Los Angeles time zone:
const laDate = transpose(sgDate, tz("America/Los_Angeles"));
//=> 'Wed Sep 07 2024 06:05:04 GMT-0700 (Pacific Daylight Time)'

// Transpose back to local time zone using Date:
const systemDate = transpose(laDate, Date);
//=> 'Wed Sep 07 2024 06:05:04 GMT+0800 (Singapore Standard Time)'

The function is helpful when for example you get your date from a date picker but you want to have the same values in a different time zone that comes from settings.

However, in your case, it's not needed at all. To get the end of the day in the given time zone, you don't need to do anything extra:

const timezone = "CET";
const from = parseISO("2024-11-30T23:00:00.000Z");
//=> '2024-11-30T23:00:00.000Z'

const eod = endOfDay(new TZDate(from, timezone));
//=> '2024-12-01T23:59:59.999+01:00'

You might notice that date-fns-tz gave us 2024-12-01T22:59:59.999Z while with TZDate you get 2024-12-01T23:59:59.999+01:00, which is the correct value for the end of the day in CET. Is this a bug?

I think I'm missing something, as these calculations are a bit extra, and I don't know what you want to achieve by converting it to UTC.

If you tell me more, I might be able to help you further.

[yss14]

Thanks for that detailed clarification. Now makes sense to me how to use the new v4 timezone API :)

[liby]

UPDATE

It seems I need to import @date-fns/utc and write it as new UTCDateMini(transpose(date, tz(timeZone))).toISOString(). In any case, the complexity has increased compared to using fromZonedTime. Is there perhaps a simpler approach that I haven't discovered?

==============================

Hello,

I'm trying to find an equivalent for fromZonedTime using the new @date-fns/tz APIs. I have a minimal example that demonstrates the issue:

import { fromZonedTime } from 'date-fns-tz';
import { TZDate } from '@date-fns/tz';

const timeZone = 'America/New_York';
const date = new Date('2024-10-18T00:00:00')

console.log('date-fns-tz:', fromZonedTime(date, timeZone).toISOString());
// '2024-10-18T04:00:00.000Z'

console.log('@date-fns/tz:', new TZDate(date, timeZone).toISOString());
// '2024-10-17T12:00:00.000-04:00'

I'm looking for a way to achieve the same result as fromZonedTime using the new APIs. Could you please provide guidance on the correct approach to replicate this behavior using TZDate?

Thank you for your help!