It appears that the repository has undergone several changes and renamings:

This commit is contained in:
2025-06-10 13:23:37 +02:00
parent a4a293a744
commit 7e4bfbd4d7
11470 changed files with 704 additions and 1206091 deletions

View File

@@ -1,111 +0,0 @@
# CDN
Starting with v3.6.0, the CDN versions of date-fns are available on [jsDelivr](https://www.jsdelivr.com/package/npm/date-fns) and other CDNs. They expose the date-fns functionality via the `window.dateFns` global variable.
Unlike the npm package, the CDN is transpiled to be compatible with IE11, so it supports a wide variety of legacy browsers and environments.
```html
<script src="https://cdn.jsdelivr.net/npm/date-fns@3.6.0/cdn.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/date-fns@3.6.0/locale/es/cdn.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/date-fns@3.6.0/locale/ru/cdn.min.js"></script>
<script>
dateFns.formatRelative(dateFns.subDays(new Date(), 3), new Date());
//=> "last Friday at 7:26 p.m."
dateFns.formatRelative(dateFns.subDays(new Date(), 3), new Date(), {
locale: dateFns.locale.es,
});
//=> "el viernes pasado a las 19:26"
dateFns.formatRelative(dateFns.subDays(new Date(), 3), new Date(), {
locale: dateFns.locale.ru,
});
//=> "в прошлую пятницу в 19:26"
</script>
```
The CDN versions are available for the main module, all & individual locales, and the FP submodule.
They come in two flavors: `cdn.js` and `cdn.min.js`. The latter is minified and should be used in production. The former is useful for debugging and development.
Keep in mind that using the CDN versions in production is suboptimal because they bundle all the date-fns functionality you will never use. It's much better to use the npm package and a tree-shaking-enabled bundler like webpack or Rollup. However, the CDN versions are helpful for quick prototyping, small projects, educational purposes, or working in a legacy environment.
## Main module
The main module with all functions bundled:
```
https://cdn.jsdelivr.net/npm/date-fns@VERSION/cdn.js
https://cdn.jsdelivr.net/npm/date-fns@VERSION/cdn.min.js
```
You can access it via the `dateFns` global variable:
```html
<script src="https://cdn.jsdelivr.net/npm/date-fns@3.6.0/cdn.min.js"></script>
<script>
dateFns.addDays(new Date(2014, 1, 11), 10);
//=> Tue Feb 21 2014 00:00:00
</script>
```
## The FP submodule
The FP submodule with all functions bundled:
```
https://cdn.jsdelivr.net/npm/date-fns@VERSION/fp/cdn.js
https://cdn.jsdelivr.net/npm/date-fns@VERSION/fp/cdn.min.js
```
You can access it via the `dateFns.fp` global variable:
```html
<script src="https://cdn.jsdelivr.net/npm/date-fns@3.6.0/fp/cdn.min.js"></script>
<script>
dateFns.fp.addDays(10, new Date(2014, 1, 11));
//=> Tue Feb 21 2014 00:00:00
</script>
```
## Locales
All locales bundled:
```
https://cdn.jsdelivr.net/npm/date-fns@VERSION/locale/cdn.js
https://cdn.jsdelivr.net/npm/date-fns@VERSION/locale/cdn.min.js
```
You can access them via the `dateFns.locale` global variable:
```html
<script src="https://cdn.jsdelivr.net/npm/date-fns@3.6.0/cdn.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/date-fns@3.6.0/locale/cdn.min.js"></script>
<script>
dateFns.formatRelative(dateFns.subDays(new Date(), 3), new Date(), {
locale: dateFns.locale.es,
});
//=> "el viernes pasado a las 19:26"
</script>
```
The locales are also available as individual files.
```
https://cdn.jsdelivr.net/npm/date-fns@VERSION/locale/LOCALE/cdn.js
https://cdn.jsdelivr.net/npm/date-fns@VERSION/locale/LOCALE/cdn.min.js
```
You can access them via the `dateFns.locale.LOCALE` global variable:
```html
<script src="https://cdn.jsdelivr.net/npm/date-fns@3.6.0/cdn.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/date-fns@3.6.0/locale/es/cdn.min.js"></script>
<script>
dateFns.formatRelative(dateFns.subDays(new Date(), 3), new Date(), {
locale: dateFns.locale.es,
});
//=> "el viernes pasado a las 19:26"
</script>
```

View File

@@ -1,2 +0,0 @@
import type { DateFnsDocs } from "@date-fns/docs";
export declare const config: DateFnsDocs.Config;

View File

@@ -1,137 +0,0 @@
/* eslint-disable */
/** @type {import('@date-fns/docs').DateFnsDocs.Config} */
export const config = {
package: "..",
json: "../tmp/docs.json",
categories: [
"General",
"Misc",
"Common Helpers",
"Conversion Helpers",
"Interval Helpers",
"Timestamp Helpers",
"Millisecond Helpers",
"Second Helpers",
"Minute Helpers",
"Hour Helpers",
"Day Helpers",
"Weekday Helpers",
"Week Helpers",
"ISO Week Helpers",
"Month Helpers",
"Quarter Helpers",
"Year Helpers",
"ISO Week-Numbering Year Helpers",
"Decade Helpers",
"Generic Helpers",
],
files: [
{
type: "markdown",
slug: "Getting-Started",
category: "General",
title: "Getting Started",
summary: "Introduction & installation instructions",
path: "gettingStarted.md",
},
{
type: "markdown",
slug: "Change-Log",
category: "General",
title: "Change Log",
summary: "Changes for each version of the library",
path: "../CHANGELOG.md",
},
{
type: "markdown",
slug: "Contributing",
category: "General",
title: "Contributing",
summary: "Contribution manual",
path: "../CONTRIBUTING.md",
},
{
type: "markdown",
slug: "Security",
category: "General",
title: "Security policy",
summary: "Security policy",
path: "../SECURITY.md",
},
{
type: "markdown",
slug: "I18n",
category: "General",
title: "I18n",
summary: "Internationalization",
path: "i18n.md",
},
{
type: "markdown",
slug: "I18n-Contribution-Guide",
category: "General",
title: "I18n Contribution Guide",
summary: "Locales manual",
path: "i18nContributionGuide.md",
},
{
type: "markdown",
slug: "Time-Zones",
category: "General",
title: "Time Zones",
summary: "Time zone support",
path: "timeZones.md",
},
{
type: "markdown",
slug: "CDN",
category: "General",
title: "CDN",
summary: "CDN version of date-fns",
path: "cdn.md",
},
{
type: "markdown",
slug: "webpack",
category: "General",
title: "webpack",
summary: "Using date-fns with webpack",
path: "webpack.md",
},
{
type: "markdown",
slug: "FP-Guide",
category: "General",
title: "FP Guide",
summary: "Curried functions",
path: "fp.md",
},
{
type: "markdown",
slug: "Unicode-Tokens",
category: "General",
title: "Unicode Tokens",
summary: "Usage of the Unicode tokens in parse and format",
path: "unicodeTokens.md",
},
{
type: "markdown",
slug: "License",
category: "General",
title: "License",
summary: "MIT © Sasha Koss",
path: "../LICENSE.md",
},
],
kindsMap: {
"src/constants/index.ts": {
kind: "constants",
category: "Misc",
},
},
};

View File

@@ -1,72 +0,0 @@
# FP Guide
**date-fns** v2.x provides [functional programming](https://en.wikipedia.org/wiki/Functional_programming) (FP)
friendly functions, like those in [lodash](https://github.com/lodash/lodash/wiki/FP-Guide),
that support [currying](https://en.wikipedia.org/wiki/Currying).
## Table of Contents
- [Usage](#usage)
- [Using Function Composition](#using-function-composition)
## Usage
FP functions are provided via `'date-fns/fp'` submodule.
Functions with options (`format`, `parse`, etc.) have two FP counterparts:
one that has the options object as its first argument and one that hasn't.
The name of the former has `WithOptions` added to the end of its name.
In **date-fns'** FP functions, the order of arguments is reversed.
```javascript
import { addYears, formatWithOptions } from "date-fns/fp";
import { eo } from "date-fns/locale";
import toUpper from "lodash/fp/toUpper"; // 'date-fns/fp' is compatible with 'lodash/fp'!
// If FP function has not received enough arguments, it returns another function
const addFiveYears = addYears(5);
// Several arguments can be curried at once
const dateToString = formatWithOptions({ locale: eo }, "d MMMM yyyy");
const dates = [
new Date(2017, 0 /* Jan */, 1),
new Date(2017, 1 /* Feb */, 11),
new Date(2017, 6 /* Jul */, 2),
];
const formattedDates = dates.map(addFiveYears).map(dateToString).map(toUpper);
//=> ['1 JANUARO 2022', '11 FEBRUARO 2022', '2 JULIO 2022']
```
## Using Function Composition
The main advantage of FP functions is support of functional-style
[function composing](https://medium.com/making-internets/why-using-chain-is-a-mistake-9bc1f80d51ba).
In the example above, you can compose `addFiveYears`, `dateToString` and `toUpper` into a single function:
```javascript
const formattedDates = dates.map((date) =>
toUpper(dateToString(addFiveYears(date))),
);
```
Or you can use `compose` function provided by [lodash](https://lodash.com) to do the same in more idiomatic way:
```javascript
import { compose } from "lodash/fp/compose";
const formattedDates = dates.map(compose(toUpper, dateToString, addFiveYears));
```
Or if you prefer natural direction of composing (as opposed to the computationally correct order),
you can use lodash' `flow` instead:
```javascript
import flow from "lodash/fp/flow";
const formattedDates = dates.map(flow(addFiveYears, dateToString, toUpper));
```

View File

@@ -1,76 +0,0 @@
# Getting Started
## Table of Contents
- [Introduction](#introduction)
- [Submodules](#submodules)
- [Installation](#installation)
## Introduction
**date-fns** provides the most comprehensive, yet simple and consistent toolset
for manipulating **JavaScript dates** in **a browser** & **Node.js**.
**date-fns** is like [lodash](https://lodash.com) for dates. It has
[**200+ functions** for all occasions](https://date-fns.org/docs/).
```js
import { format, compareAsc } from "date-fns";
format(new Date(2014, 1, 11), "MM/dd/yyyy");
//=> '02/11/2014'
const dates = [
new Date(1995, 6, 2),
new Date(1987, 1, 11),
new Date(1989, 6, 10),
];
dates.sort(compareAsc);
//=> [
// Wed Feb 11 1987 00:00:00,
// Mon Jul 10 1989 00:00:00,
// Sun Jul 02 1995 00:00:00
// ]
```
## Submodules
**date-fns** includes some optional features as submodules in the npm package.
Here is the list of them, in order of nesting:
- FP — functional programming-friendly variations of the functions. See [FP Guide](https://date-fns.org/docs/FP-Guide);
The later submodules are also included inside the former if you want to use multiple features from the list.
To use submodule features, [install the npm package](#npm) and then import a function from a submodule:
```js
// The main submodule:
import { addDays } from "date-fns";
// FP variation:
import { addDays, format } from "date-fns/fp";
```
## Installation
The library is available as an [npm package](https://www.npmjs.com/package/date-fns).
To install the package, run:
```bash
npm install date-fns --save
# or
yarn add date-fns
```
Start using:
```js
import { formatDistance, subDays } from "date-fns";
formatDistance(subDays(new Date(), 3), new Date(), { addSuffix: true });
//=> "3 days ago"
```

View File

@@ -1,91 +0,0 @@
# Internationalization
## Table of Contents
- [Usage](#usage)
- [Adding New Language](#adding-new-language)
## Usage
There are just a few functions that support I18n:
- [`format`](https://date-fns.org/docs/format)
- [`formatDistance`](https://date-fns.org/docs/formatDistance)
- [`formatDistanceStrict`](https://date-fns.org/docs/formatDistanceStrict)
- [`formatRelative`](https://date-fns.org/docs/formatRelative)
To use a locale, you need to require it and then pass
as an option to a function:
```js
import { formatDistance } from "date-fns";
// Require Esperanto locale
import { eo } from "date-fns/locale";
const result = formatDistance(
new Date(2016, 7, 1),
new Date(2015, 0, 1),
{ locale: eo }, // Pass the locale as an option
);
//=> 'pli ol 1 jaro'
```
It might seem complicated to require and pass locales as options,
but unlike Moment.js which bloats your build with all the locales
by default date-fns forces developer to manually require locales when needed.
To make API simple, we encourage you to write tiny wrappers and use those
instead of original functions:
```js
// app/_lib/format.js
import { format } from "date-fns";
import { enGB, eo, ru } from "date-fns/locale";
const locales = { enGB, eo, ru };
// by providing a default string of 'PP' or any of its variants for `formatStr`
// it will format dates in whichever way is appropriate to the locale
export default function (date, formatStr = "PP") {
return format(date, formatStr, {
locale: locales[window.__localeId__], // or global.__localeId__
});
}
// Later:
import format from "app/_lib/format";
window.__localeId__ = "enGB";
format(friday13, "EEEE d");
//=> 'Friday 13'
window.__localeId__ = "eo";
format(friday13, "EEEE d");
//=> 'vendredo 13'
// If the format string is omitted, it will take the default for the locale.
window.__localeId__ = "enGB";
format(friday13);
//=> Jul 13, 2019
window.__localeId__ = "eo";
format(friday13);
//=> 2019-jul-13
```
## Adding New Language
At the moment there is no definitive guide, so if you feel brave enough,
use this quick guide:
- First of all, [create an issue](https://github.com/date-fns/date-fns/issues/new?title=XXX%20language%20support)
so you won't overlap with others.
- A detailed explanation of how to [add a new locale](https://github.com/date-fns/date-fns/blob/master/docs/i18nContributionGuide.md#adding-a-new-locale).
- Use [English locale](https://github.com/date-fns/date-fns/tree/master/src/locale/en-US)
as the basis and then incrementally adjust the tests and the code.
- Directions on [adding a locale with the same language as another locale](https://github.com/date-fns/date-fns/blob/master/docs/i18nContributionGuide.md#creating-a-locale-with-the-same-language-as-another-locale).
- If you have questions or need guidance, leave a comment in the issue.
Thank you for your support!

File diff suppressed because it is too large Load Diff

View File

@@ -1,26 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="32px" height="26px" viewBox="0 0 32 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 3.7.1 (28215) - http://www.bohemiancoding.com/sketch -->
<title>Slice 1</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="date-fns-mini-logo" fill="#770C56">
<g id="Page-1">
<g id="logo">
<g id="Page-1">
<g id="Solid-logo">
<g id="White-logo">
<path d="M0.0773377951,12.9617647 C0.0773377951,10.4657522 0.541359926,8.11201106 1.46941811,5.90047059 C2.39747629,3.68893013 3.73386003,1.72977324 5.47860941,0.0229411764 L8.98665179,0.0229411764 C5.34866372,3.58342956 3.52969697,7.89632761 3.52969697,12.9617647 C3.52969697,18.0272018 5.34866372,22.3400999 8.98665179,25.9005883 L5.47860941,25.9005883 C3.73386003,24.1937561 2.39747629,22.2345993 1.46941811,20.0230588 C0.541359926,17.8115184 0.0773377951,15.4577772 0.0773377951,12.9617647 L0.0773377951,12.9617647 L0.0773377951,12.9617647 L0.0773377951,12.9617647 Z M31.4378137,12.9617647 C31.4378137,15.4577772 30.9737916,17.8115184 30.0457334,20.0230588 C29.1176752,22.2345993 27.7812915,24.1937561 26.0365421,25.9005883 L22.5284998,25.9005883 C26.1664878,22.3400999 27.9854545,18.0272018 27.9854545,12.9617647 C27.9854545,7.89632761 26.1664878,3.58342956 22.5284998,0.0229411764 L26.0365421,0.0229411764 C27.7812915,1.72977324 29.1176752,3.68893013 30.0457334,5.90047059 C30.9737916,8.11201106 31.4378137,10.4657522 31.4378137,12.9617647 L31.4378137,12.9617647 L31.4378137,12.9617647 L31.4378137,12.9617647 Z" id="Parans"></path>
<g id="Hands" transform="translate(12.954081, 1.720588)">
<rect id="Hand" x="0" y="0" width="2.32013386" height="13.1911764"></rect>
<polygon id="Hand" points="2.3189551 13.1499342 0.815087916 11.6629302 10.2484366 2.3353599 11.7523038 3.82236388 2.3189551 13.1499342"></polygon>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 2.4 KiB

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 176 33"><g fill="#770C56" fill-rule="evenodd"><path d="M.1 16.5A22.7 22.7 0 017.1 0h4.4a22 22 0 00-7 16.5 22 22 0 007 16.4H7A22.5 22.5 0 01.1 16.5zm40.2 0a22.7 22.7 0 01-7 16.4H29a22 22 0 007-16.4 22 22 0 00-7-16.5h4.5a22.5 22.5 0 016.9 16.5z" fill-rule="nonzero"/><path d="M16.6 2.2h3v16.7h-3z"/><path d="M19.6 18.9l-2-2L29.7 5.2l2 2zM53.4 17.5c0 2 .5 3.8 1.4 5.2.8 1.4 2.2 2 4.2 2 1.5 0 2.7-.6 3.7-1.9 1-1.3 1.4-3.1 1.4-5.5 0-2.5-.5-4.3-1.5-5.5a4.7 4.7 0 00-3.7-1.7c-1.6 0-3 .6-4 1.8-1 1.3-1.5 3.1-1.5 5.6zm5-10.3c1.4 0 2.7.3 3.7 1 .5.3 1.2 1 2 1.9V.3h3v26.6h-2.9v-2.7a7 7 0 01-2.7 2.6c-1 .5-2.2.8-3.5.8-2.2 0-4-.9-5.6-2.7a10.6 10.6 0 01-2.4-7.2c0-2.9.7-5.3 2.2-7.4a7 7 0 016.1-3zm15.1 14.6c0 1 .4 1.7 1 2.2.8.5 1.6.8 2.5.8 1.2 0 2.3-.3 3.3-.8a4.5 4.5 0 002.7-4.3V17l-1.5.6-1.8.4-2 .2c-1.2.2-2 .4-2.7.8-1 .5-1.5 1.4-1.5 2.7zm8-6.6c.7-.1 1.2-.4 1.4-1 .2-.2.2-.7.2-1.2 0-1.1-.4-1.9-1.1-2.4-.8-.5-2-.8-3.4-.8-1.7 0-3 .5-3.6 1.4-.4.5-.7 1.3-.8 2.3h-3c0-2.4.8-4 2.3-5 1.5-1 3.2-1.4 5.1-1.4 2.3 0 4.2.4 5.6 1.3 1.4.9 2.1 2.2 2.1 4v11.2c0 .3 0 .6.2.8.1.2.4.3.9.3a5 5 0 001 0V27a9 9 0 01-1.1.3h-1c-1.2 0-2-.4-2.5-1.2-.3-.4-.5-1-.6-1.7a8.8 8.8 0 01-7 3.2c-1.7 0-3.2-.6-4.3-1.7a5.4 5.4 0 01-1.8-4c0-1.9.6-3.2 1.7-4.2a8 8 0 014.4-1.9l5.2-.6zm9.9-13h3.3v5.4h3v2.6h-3V23c0 .6.2 1 .7 1.3l1.2.2a15.2 15.2 0 001.2 0v2.5l-1.2.3h-1.3c-1.5 0-2.6-.4-3.1-1.1-.6-.8-.8-1.8-.8-3V10.1h-2.6V7.6h2.6V2.2zm16.8 5a8.8 8.8 0 016.9 3.4c.7 1 1 2.1 1.3 3.4.2 1 .3 2.3.3 4.3h-14.2c0 2 .5 3.5 1.4 4.7.9 1.2 2.2 1.8 4 1.8a5.2 5.2 0 005.3-4h3.2c0 .8-.3 1.6-.8 2.4a7.6 7.6 0 01-5.3 4c-.8.3-1.7.4-2.6.4-2.4 0-4.5-.9-6.2-2.6a10.2 10.2 0 01-2.5-7.4c0-3 .9-5.6 2.6-7.6 1.6-1.9 3.8-2.9 6.6-2.9zm5.2 8.5a8.4 8.4 0 00-1-3.4c-.9-1.5-2.3-2.3-4.4-2.3a5 5 0 00-3.8 1.6c-1 1-1.5 2.4-1.6 4.1h10.8zm5.5-.8h9.1v3.4h-9v-3.4zM132 4.6c0-1.3.3-2.3.7-3 .8-1 2.2-1.6 4.4-1.6a11.4 11.4 0 011.4 0v3a26.4 26.4 0 00-1.2 0c-1 0-1.5.2-1.7.7-.2.6-.3 1.9-.3 4h3.2v2.5h-3.3V27H132V10.2h-2.7V7.7h2.7v-3zm8.6 3h3v2.7c1-1.1 2-2 3-2.4 1-.5 2.1-.8 3.4-.8 2.7 0 4.6 1 5.6 3 .5 1 .8 2.5.8 4.4V27H153V14.7c0-1.2-.2-2.1-.6-2.8-.5-1.2-1.6-1.8-3.1-1.8a4.9 4.9 0 00-4.2 1.8c-.6.6-1 1.3-1.1 2-.2.6-.3 1.6-.3 2.9v10.1h-3.2V7.6zm21.6 13.2c0 1.1.4 2 .8 2.5.8 1 2.3 1.6 4.3 1.6 1.2 0 2.2-.2 3.2-.8.9-.5 1.3-1.3 1.3-2.4a2 2 0 00-1-1.9c-.5-.3-1.5-.6-2.9-1l-2.5-.6c-1.7-.4-3-.8-3.7-1.3a4.1 4.1 0 01-2-3.7c0-1.8.6-3.3 1.9-4.4 1.3-1.2 3-1.7 5.3-1.7 3 0 5 .8 6.3 2.5.8 1.1 1.2 2.3 1.2 3.5h-3c-.1-.7-.4-1.4-.9-2-.7-.8-2-1.3-3.8-1.3-1.3 0-2.2.3-2.8.8-.7.4-1 1-1 1.8 0 .9.4 1.5 1.3 2 .4.3 1.2.6 2.1.8l2.1.6c2.4.5 4 1 4.7 1.6 1.3.8 2 2.1 2 4a6 6 0 01-2 4.4c-1.3 1.2-3.3 1.9-6 1.9-2.9 0-5-.7-6.1-2a7.4 7.4 0 01-2-4.9h3.2z"/></g></svg>

Before

Width:  |  Height:  |  Size: 2.6 KiB

View File

@@ -1,19 +0,0 @@
# Releasing date-fns
1. First, make sure that the library is built by running `./scripts/build/build.sh` and committing and pushing any change you would have.
2. Then add the changelog entry generated by `npx tsx scripts/release/buildChangelog.ts` to (CHANGELOG.md)[../CHANGELOG.md]. Make sure that the output is valid Markdown and fix if there're any errors. Commit and push the file.
3. Using the version that the changelog script generated, run the command:
```bash
env VERSION="vX.XX.X" APP_ENV="production" GOOGLE_APPLICATION_CREDENTIALS="secrets/production/key.json" ./scripts/release/release.sh
```
The script will change `package.json`. **Do not commit the change, and reset it instead**.
4. Now when the package is published, go to [GitHub Releases](https://github.com/date-fns/date-fns/releases) and draft a new version using the changelog entry you generated earlier.
5. Finally, write an announce tweet using the created GitHub release as the tweet link.
You're done, great job!

View File

@@ -1,104 +0,0 @@
# Time zones
Starting from v4, date-fns has first-class support for time zones. It is provided via [`@date-fns/tz`] and [`@date-fns/utc`] packages. Visit the links to learn more about corresponding packages.
Just like with everything else in date-fns, the time zones support has a minimal bundle size footprint with `UTCDateMini` and `TZDateMini` being `239 B` and `761 B`, respectively.
If you're looking for time zone support prior to date-fns v4, see the third-party [`date-fns-tz`](https://github.com/marnusw/date-fns-tz) package.
[See the announcement blog post](https://blog.date-fns.org/v40-with-time-zone-support/) for details about the motivation and implementation and [the change log entry for the list of changes in v4.0](https://date-fns.org/v4.0.0/docs/Change-Log#v4.0.0-2024-09-16).
## Working with time zones
There are two ways to start working with time zones:
- [Using the `Date` extensions `TZDate` and `UTCDate`](#using-tzdate-utcdate)
- [Using the date-fns functions' `in` option](#using-in-option)
### Using `TZDate` & `UTCDate`
One way is to use [`TZDate`](https://github.com/date-fns/tz) or [`UTCDate`](https://github.com/date-fns/tz) `Date` extensions,with regular date-fns functions:
```ts
import { TZDate } from "@date-fns/tz";
import { addHours } from "date-fns";
// Given that the system time zone is America/Los_Angeles
// where DST happens on Sunday, 13 March 2022, 02:00:00
// Using the system time zone will produce 03:00 instead of 02:00 because of DST:
const date = new Date(2022, 2, 13);
addHours(date, 2).toString();
//=> 'Sun Mar 13 2022 03:00:00 GMT-0700 (Pacific Daylight Time)'
// Using Asia/Singapore will provide the expected 02:00:
const tzDate = new TZDate(2022, 2, 13, "Asia/Singapore");
addHours(tzDate, 2).toString();
//=> 'Sun Mar 13 2022 02:00:00 GMT+0800 (Singapore Standard Time)'
```
You can safely mix and match regular `Date` instances, as well as `UTCDate` or `TZDate` in different time zones and primitive values (timestamps and strings). date-fns will normalize the arguments, taking the first object argument (`Date` or a `Date` extension instance) as the reference and return the result in the reference type:
```ts
import { TZDate } from "@date-fns/tz";
import { differenceInBusinessDays } from "date-fns";
const laterDate = new TZDate(2025, 0, 1, "Asia/Singapore");
const earlierDate = new TZDate(2024, 0, 1, "America/New_York");
// Will calculate in Asia/Singapore
differenceInBusinessDays(laterDate, earlierDate);
//=> 262
// Will calculate in America/New_York
differenceInBusinessDays(earlierDate, laterDate);
//=> -261
```
In the given example, the one-day difference comes from the fact that in New York (UTC-5), the `earlierDate` will be `Dec 31` rather than `Jan 1`:
```ts
laterDate.withTimeZone("Asia/Singapore").toString();
//=> 'Wed Jan 01 2025 00:00:00 GMT+0800 (Singapore Standard Time)'
earlierDate.withTimeZone("Asia/Singapore").toString();
//=> 'Mon Jan 01 2024 13:00:00 GMT+0800 (Singapore Standard Time)'
laterDate.withTimeZone("America/New_York").toString();
//=> 'Tue Dec 31 2024 11:00:00 GMT-0500 (Eastern Standard Time)'
earlierDate.withTimeZone("America/New_York").toString();
//=> 'Mon Jan 01 2024 00:00:00 GMT-0500 (Eastern Standard Time)'
```
This is essential to understand and consider when making calculations.
### Using `in` option
When it is important to get the value in a specific time zone or when you are unsure about the type of arguments, use the function context `in` option.
Each function, where the calculation might be affected by the time zone, like with `differenceInBusinessDays`, accepts the `in` option that provides the context for the arguments and the result, so you can explicitly say what time zone to use:
```ts
import { tz } from "@date-fns/tz";
// Will calculate in Asia/Singapore
differenceInBusinessDays(laterDate, earlierDate);
//=> 262
// Will normalize to America/Los_Angeles
differenceInBusinessDays(laterDate, earlierDate, {
in: tz("America/Los_Angeles"),
});
//=> 261
```
In the example, we forced `differenceInBusinessDays` to use the Los Angeles time zone.
## Further reading
Read more about the time zone packages visiting their READMEs:
- [`@date-fns/tz`]
- [`@date-fns/utc`]
[`@date-fns/tz`]: https://github.com/date-fns/tz
[`@date-fns/utc`]: https://github.com/date-fns/utc

View File

@@ -1,54 +0,0 @@
# Unicode Tokens
Starting with v2, `format` and `parse` use [Unicode tokens].
The tokens are different from Moment.js and other libraries that opted to use
custom formatting rules. While usage of a standard ensures compatibility and
the future of the library, it causes confusion that this document intends
to resolve.
## Popular mistakes
There are 4 tokens that cause most of the confusion:
- `D` and `DD` that represent the day of a year (1, 2, ..., 365, 366)
are often confused with `d` and `dd` that represent the day of a month
(1, 2, ..., 31).
- `YY` and `YYYY` that represent the local week-numbering year (44, 01, 00, 17)
are often confused with `yy` and `yyyy` that represent the calendar year.
```js
// ❌ Wrong!
format(new Date(), "YYYY-MM-DD");
//=> 2018-10-283
// ✅ Correct
format(new Date(), "yyyy-MM-dd");
//=> 2018-10-10
// ❌ Wrong!
parse("11.02.87", "D.MM.YY", new Date()).toString();
//=> 'Sat Jan 11 1986 00:00:00 GMT+0200 (EET)'
// ✅ Correct
parse("11.02.87", "d.MM.yy", new Date()).toString();
//=> 'Wed Feb 11 1987 00:00:00 GMT+0200 (EET)'
```
To help with the issue, `format` and `parse` functions won't accept
these tokens without `useAdditionalDayOfYearTokens` option for `D` and `DD` and
`useAdditionalWeekYearTokens` options for `YY` and `YYYY`:
```js
format(new Date(), "D", { useAdditionalDayOfYearTokens: true });
//=> '283'
parse("365+1987", "DD+YYYY", new Date(), {
useAdditionalDayOfYearTokens: true,
useAdditionalWeekYearTokens: true,
}).toString();
//=> 'Wed Dec 31 1986 00:00:00 GMT+0200 (EET)'
```
[Unicode tokens]: https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table

View File

@@ -1,53 +0,0 @@
# webpack
## Removing unused languages from dynamic import
If a locale is imported dynamically, then all locales from date-fns are loaded by webpack into a bundle (~160kb) or split across the chunks. This prolongs the build process and increases the amount of space taken. However, it is possible to use webpack to trim down languages using [ContextReplacementPlugin].
Let's assume that we have a single point in which supported locales are present:
`config.js`:
```js
// `see date-fns/src/locale` for available locales
export const supportedLocales = ["en-US", "de", "pl", "it"];
```
We could also have a function that formats the date:
```js
const getLocale = (locale) => import(`date-fns-locale/locale/${locale}.js`); // or require() if using CommonJS
const formatDate = (date, formatStyle, locale) => {
return format(date, formatStyle, {
locale: getLocale(locale).default,
});
};
```
In order to exclude unused languages we can use webpacks [ContextReplacementPlugin].
`webpack.config.js`:
```js
import webpack from "webpack";
import { supportedLocales } from "./config.js";
export default config = {
resolve: {
alias: {
"date-fns-locale": path.dirname(require.resolve("date-fns/package.json")),
},
},
plugins: [
new webpack.ContextReplacementPlugin(
/date-fns[/\\]locale/,
new RegExp(`(${locales.join("|")})\.js$`),
),
],
};
```
This results in a language bundle of ~23kb .
[contextreplacementplugin]: https://webpack.js.org/plugins/context-replacement-plugin/