# date-fns v4.0.0

- Product: date-fns (https://whatsnew.fyi/product/date-fns)
- Vendor: date-fns
- Date: 2024-09-16
- Version: v4.0.0
- Original notes: https://github.com/date-fns/date-fns/releases/tag/v4.0.0
- Permalink: https://whatsnew.fyi/product/date-fns/releases/v4.0.0

What's New is an index, not a publisher: every entry below links to the vendor's own release notes, which are the authoritative source. Entries are labelled where they are hand-curated sample data, pre-releases, or drawn from a secondary source such as a developer blog.

Reuse: the summaries, labels and curation here are © What's New. Quote freely with attribution and a link back; wholesale republication of the corpus is not permitted — terms: https://whatsnew.fyi/terms. The vendors' own release notes remain their publishers'.

---

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](https://blog.date-fns.org/v40-with-time-zone-support/).

\- [Sasha @kossnocorp](https://twitter.com/kossnocorp)

###### Added

- Added time zones support via [`@date-fns/tz`](https://github.com/date-fns/tz)'s `TZDate` class and `tz` helper function. See its [README](https://github.com/date-fns/tz) 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:

  ```ts
  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`.

  ```ts
  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](https://github.com/date-fns/date-fns/issues/new).

- **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](https://github.com/date-fns/date-fns/issues/new).

###### Fixed

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