From fd174802aa23bfb9f29cf77d6cc9fd3ffcffc5fd Mon Sep 17 00:00:00 2001 From: Ben Asher Date: Tue, 2 Jul 2024 10:25:02 -0400 Subject: [PATCH 1/2] Make date-fns a regular dependency --- README.md | 4 ++-- package.json | 5 +++-- pnpm-lock.yaml | 7 ++++--- website/docs/start.mdx | 4 ++-- website/docs/upgrading.mdx | 2 +- 5 files changed, 12 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 33162007f6..29867b45c1 100644 --- a/README.md +++ b/README.md @@ -14,12 +14,12 @@ DayPicker is a [React](https://react.dev) component to create date pickers, cale - ♿ Complies with WCAG 2.1 AA requirements for accessibility. - ⚙️ Customizable internal components for complex use cases. -DayPicker is written in TypeScript and compiled to CommonJS and ESM. It requires [date-fns](https://date-fns.org) as a peer dependency. +DayPicker is written in TypeScript and compiled to CommonJS and ESM. ## Installation ```bash -npm install react-day-picker date-fns +npm install react-day-picker ``` npm version diff --git a/package.json b/package.json index 0e0d6fc1f7..e6f284dbeb 100644 --- a/package.json +++ b/package.json @@ -115,6 +115,9 @@ "website/docs", "tsconfig.json" ], + "dependencies": { + "date-fns": "^3.6.0" + }, "devDependencies": { "@date-fns/utc": "^1.2.0", "@jest/types": "^29.6.3", @@ -129,7 +132,6 @@ "@types/react-dom": "^18.3.0", "@typescript-eslint/eslint-plugin": "^7.13.1", "@typescript-eslint/parser": "^7.12.0", - "date-fns": "^3.6.0", "date-fns-jalali": "3.6.0-1", "eslint": "^8.57.0", "eslint-config-prettier": "^9.1.0", @@ -156,7 +158,6 @@ "typescript-css-modules": "^1.0.4" }, "peerDependencies": { - "date-fns": "^2.28.0 || ^3.0.0", "react": "^18 || ^19" }, "funding": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4f973c5726..49c6585eee 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -7,6 +7,10 @@ settings: importers: .: + dependencies: + date-fns: + specifier: ^3.6.0 + version: 3.6.0 devDependencies: '@date-fns/utc': specifier: ^1.2.0 @@ -47,9 +51,6 @@ importers: '@typescript-eslint/parser': specifier: ^7.12.0 version: 7.14.1(eslint@8.57.0)(typescript@5.5.3) - date-fns: - specifier: ^3.6.0 - version: 3.6.0 date-fns-jalali: specifier: 3.6.0-1 version: 3.6.0-1 diff --git a/website/docs/start.mdx b/website/docs/start.mdx index 204f1f15ae..2610f7a296 100644 --- a/website/docs/start.mdx +++ b/website/docs/start.mdx @@ -6,10 +6,10 @@ pagination_next: using-daypicker/styling ## Install the Package -DayPicker is available as `react-day-picker` npm package. It requires [date-fns](https://date-fns.org) as a peer dependency. +DayPicker is available as `react-day-picker` npm package. ```bash npm2yarn -npm install react-day-picker@next date-fns +npm install react-day-picker@next ``` - See #1087 if you are interested in DayPicker supporting different date diff --git a/website/docs/upgrading.mdx b/website/docs/upgrading.mdx index 0afd023aa1..2ad9c42c7e 100644 --- a/website/docs/upgrading.mdx +++ b/website/docs/upgrading.mdx @@ -19,7 +19,7 @@ Follow these steps to upgrade your project from v8 to v9: ### 1. Upgrade to the next version ```bash npm2yarn -npm install react-day-picker@next date-fns +npm install react-day-picker@next ``` ### 2. Check for removed props From 9e9e94492ed27224f629a9ec609f649092286b17 Mon Sep 17 00:00:00 2001 From: Giampaolo Bellavite Date: Sat, 13 Jul 2024 18:51:57 -0500 Subject: [PATCH 2/2] Update localization.mdx --- website/docs/docs/localization.mdx | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/website/docs/docs/localization.mdx b/website/docs/docs/localization.mdx index c0bd21b00f..4f1655059b 100644 --- a/website/docs/docs/localization.mdx +++ b/website/docs/docs/localization.mdx @@ -6,7 +6,7 @@ sidebar_position: 5 Learn how to set the locale, adjust the week start day, and apply ISO Week Dates to enhance the user experience across different regions and languages. -## Configure the Locale +## Locale props | Prop Name | Type | Description | | ----------------------- | --------------------------------------------- | ------------------------------------------------------------------ | @@ -15,6 +15,14 @@ Learn how to set the locale, adjust the week start day, and apply ISO Week Dates | `firstWeekContainsDate` | `1` \| `4` | Configure the first date in the first week of the year. | | `ISOWeek` | `boolean` | Use [ISO Week Dates](https://en.wikipedia.org/wiki/ISO_week_date). | +### Install date-fns + +DayPicker uses the [date-fns](https://date-fns.org) library to localize the calendar. To set a different locale, you need to install `date-fns`: + +```bash npm2yarn +npm install date-fns +``` + ### Set a Different Locale By default, the locale is set to English (US). To localize the calendar, pass a [`Locale`](https://date-fns.org/docs/I18n) object to the `locale` prop. @@ -31,7 +39,7 @@ import { es } from "date-fns/locale"; -### First Date of the Week +## First Date of the Week Utilize the `weekStartsOn` prop to specify the starting day of the week. @@ -43,7 +51,7 @@ Utilize the `weekStartsOn` prop to specify the starting day of the week. -### First Week Contains Date +## First Week Contains Date The `firstWeekContainsDate` prop can be used to change the first day of the week for the year's initial week, which is used in the calculation of week numbers. @@ -61,7 +69,7 @@ The `firstWeekContainsDate` prop can be used to change the first day of the week -### ISO Week Dates +## ISO Week Dates Use `ISOWeek` to switch using [ISO Week Dates](https://en.wikipedia.org/wiki/ISO_week_date) instead of the locale setting.