Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

build: date-fns as regular dependency #2249

Merged
merged 4 commits into from
Jul 13, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
```

<a href="https://www.npmjs.com/package/react-day-picker"><img src="https://img.shields.io/npm/v/react-day-picker" alt="npm version"/></a>
Expand Down
5 changes: 3 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -129,7 +132,6 @@
"@types/react-dom": "^18.3.0",
"@typescript-eslint/eslint-plugin": "^7.15.0",
"@typescript-eslint/parser": "^7.16.0",
"date-fns": "^3.6.0",
"date-fns-jalali": "3.6.0-1",
"eslint": "^8.57.0",
"eslint-config-prettier": "^9.1.0",
Expand All @@ -156,7 +158,6 @@
"typescript-css-modules": "^1.0.4"
},
"peerDependencies": {
"date-fns": "^2.28.0 || ^3.0.0",
"react": "^18 || ^19"
},
"funding": {
Expand Down
7 changes: 4 additions & 3 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

16 changes: 12 additions & 4 deletions website/docs/docs/localization.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
| ----------------------- | --------------------------------------------- | ------------------------------------------------------------------ |
Expand All @@ -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.
Expand All @@ -31,7 +39,7 @@ import { es } from "date-fns/locale";
<Examples.Spanish />
</BrowserWindow>

### First Date of the Week
## First Date of the Week

Utilize the `weekStartsOn` prop to specify the starting day of the week.

Expand All @@ -43,7 +51,7 @@ Utilize the `weekStartsOn` prop to specify the starting day of the week.
<Examples.SpanishWeekStartsOn />
</BrowserWindow>

### 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.

Expand All @@ -61,7 +69,7 @@ The `firstWeekContainsDate` prop can be used to change the first day of the week
<Examples.WeeknumberCustom />
</BrowserWindow>

### 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.

Expand Down
4 changes: 2 additions & 2 deletions website/docs/start.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ pagination_next: docs/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
Expand Down
2 changes: 1 addition & 1 deletion website/docs/upgrading.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down