What changed in date-fns from 3 to 4

This release revisits the approach to CDN usage and introduces a new package, @date-fns/cdn and deprecates the date-fns CDN scripts. It allowed reducing the zipped package size from 5.83 MB down to 3.96 MB without introducing any breaking changes.

In v5.0.0-alpha.0 where CDN scripts are completely removed from date-fns the change is more significant and brings the zipped package size down to 2.89 MB.

It is just the first step in optimizing the package size. Expect further size reduction in the future v4 and v5 versions.

Changed

• DEPRECATED: The date-fns CDN scripts are now deprecated and will be removed in the next major release. Please switch to the new @date-fns/cdn package for CDN usage.

• Removed CDN source maps to reduce the package size. If you rely on them, please switch to the new @date-fns/cdn package that still includes them.

Kudos to @ImRodry and @puneetdixit200 for their contributions.

Fixed

• Fixed missing modularized optimization fallback (for Next.js and others). See #4193.

• Fixed pt locale first day of week to be Sunday. See #4195 by @ImRodry.

• Fixed zh-CN, zh-HK, and zh-TW locale month parsing for October, November, and December. See #4194 by @puneetdixit200.

Fixed

• Fixed type definitions missing in v4.2.0 due to TypeScript misconfiguration.

This is a minor release in all senses, it only includes documentation updates (first of many) that points to the new You Don't Need date-fns* page.

* Not really

Changed

• Added Temporal API references to the JSDoc annotations of add, addBusinessDays, and addDays.

This release adds time zone support to format functions (that I somehow missed when working on the feature) and fixes a few bugs.

Make sure also upgrade TZDate to v1.0.2 as it includes a bunch of critical bug fixes.

Fixed

• Fixed internal constructFrom throwing an exception on null arguments. While null isn't allowed, the functions should rather return Invalid Date or NaN in such cases. See #3885.

Added

• Added missing time zone support to format, formatISO, formatISO9075, formatRelative and formatRFC3339. See #3886.

I have great news! First, ten years after its release, date-fns finally gets first-class time zone support.

Another great news is that there aren't many breaking changes in this release. All of them are type-related and will affect only those explicitly using internal date-fns types. Finally, it has been less than a year since the last major release, which is an improvement over the previous four years between v2 and v3. I plan on keeping the pace and minimizing breaking changes moving forward.

Read more about the release in the announcement blog post.

- Sasha @kossnocorp

Added

• Added time zones support via @date-fns/tz's TZDate class and tz helper function. See its README for the details about the API.

• All relevant functions now accept the context in option, which allows to specify the time zone to make the calculations in. If the function also returns a date, it will be in the specified time zone:

  import { addDays, startOfDay } from "date-fns";
  import { tz } from "@date-fns/tz";
  
  startOfDay(addDays(Date.now(), 5, { in: tz("Asia/Singapore") }));
  //=> "2024-09-16T00:00:00.000+08:00"
  

  In the example, addDays will get the current date and time in Singapore and add 5 days to it. startOfDay will inherit the date type and return the start of the day in Singapore.

Changed

• The function arguments, as well as Interval's start and end, now can be of different types, allowing you to mix UTCDate, TZDate, Date, and other extensions, as well as primitives (strings and numbers).

  The functions will normalize these values, make calculations, and return the result in the same type, preventing any bugs caused by the discrepancy. If passed, the type will be inferred from the context in option or the first encountered argument object type. The Interval's start and end will be considered separately, starting from start.

  In the given example, the result will be in the TZDate as the first argument is a number, and the start takes precedence over the end.

  clamp(Date.now(), {
    start: new TZDate(start, "Asia/Singapore"),
    end: new UTCDate(),
  });
  //=> TZDate
  

• BREAKING: This release contains a bunch of types changes that should not affect the library's expected usage. The changes are primarily internal and nuanced, so rather than listing them here, I recommend you run the type checker after the upgrade. If there are unfixable problems, please open an issue.

• BREAKING: The package is now ESM-first. CommonJS is still supported, and it should not affect most users, but it might break in certain environments. If you encounter any issues, please report them.

Fixed

• Fixed CDN build compatibility with jQuery and other tools that expose $ by properly wrapping the code in an IIFE.