react-day-picker 9.0.6 → 9.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/DayPicker.js +6 -3
- package/dist/cjs/DayPicker.js.map +1 -1
- package/dist/cjs/index.d.ts +1 -0
- package/dist/cjs/index.js +3 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/selection/useMulti.js +1 -7
- package/dist/cjs/selection/useMulti.js.map +1 -1
- package/dist/cjs/selection/useRange.js +1 -7
- package/dist/cjs/selection/useRange.js.map +1 -1
- package/dist/cjs/selection/useSingle.js +2 -8
- package/dist/cjs/selection/useSingle.js.map +1 -1
- package/dist/cjs/types/props.d.ts +16 -8
- package/dist/cjs/useCalendar.d.ts +1 -1
- package/dist/cjs/useCalendar.js +26 -2
- package/dist/cjs/useCalendar.js.map +1 -1
- package/dist/cjs/useDayPicker.d.ts +1 -0
- package/dist/cjs/useDayPicker.js +1 -1
- package/dist/cjs/useDayPicker.js.map +1 -1
- package/dist/esm/DayPicker.js +6 -3
- package/dist/esm/DayPicker.js.map +1 -1
- package/dist/esm/index.d.ts +1 -0
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/selection/useMulti.js +1 -7
- package/dist/esm/selection/useMulti.js.map +1 -1
- package/dist/esm/selection/useRange.js +1 -7
- package/dist/esm/selection/useRange.js.map +1 -1
- package/dist/esm/selection/useSingle.js +2 -8
- package/dist/esm/selection/useSingle.js.map +1 -1
- package/dist/esm/types/props.d.ts +16 -8
- package/dist/esm/useCalendar.d.ts +1 -1
- package/dist/esm/useCalendar.js +26 -2
- package/dist/esm/useCalendar.js.map +1 -1
- package/dist/esm/useDayPicker.d.ts +1 -0
- package/dist/esm/useDayPicker.js +1 -1
- package/dist/esm/useDayPicker.js.map +1 -1
- package/examples/SingleRequired.tsx +1 -1
- package/package.json +4 -4
- package/src/DayPicker.test.tsx +49 -5
- package/src/DayPicker.tsx +20 -17
- package/src/index.ts +2 -0
- package/src/selection/useMulti.tsx +1 -8
- package/src/selection/useRange.tsx +0 -8
- package/src/selection/useSingle.tsx +2 -9
- package/src/types/props.test.tsx +10 -3
- package/src/types/props.ts +16 -8
- package/src/useCalendar.ts +63 -6
- package/src/useDayPicker.ts +1 -1
- package/website/docs/docs/localization.mdx +21 -0
- package/website/docs/docs/selection-modes.mdx +9 -8
- package/website/docs/docs/styling.mdx +2 -2
- package/website/docs/upgrading.mdx +2 -2
|
@@ -76,12 +76,13 @@ By setting the `mode` prop to `"multiple"`, DayPicker allows selecting multiple
|
|
|
76
76
|
|
|
77
77
|
### Multiple Mode Props
|
|
78
78
|
|
|
79
|
-
| Prop Name | Type
|
|
80
|
-
| ---------- |
|
|
81
|
-
| `selected` | `Date[] \| undefined`
|
|
82
|
-
| `onSelect` | `(selected,
|
|
83
|
-
| `min` | `number`
|
|
84
|
-
| `max` | `number`
|
|
79
|
+
| Prop Name | Type | Description |
|
|
80
|
+
| ---------- | ---------------------------------------- | --------------------------------------- |
|
|
81
|
+
| `selected` | `Date[] \| undefined` | The selected dates. |
|
|
82
|
+
| `onSelect` | `(selected, date, modifiers, e) => void` | Event callback when a date is selected. |
|
|
83
|
+
| `min` | `number` | The minimum dates that can be selected. |
|
|
84
|
+
| `max` | `number` | The maximum dates that can be selected. |
|
|
85
|
+
| `required` | `boolean` | Make the selection required. |
|
|
85
86
|
|
|
86
87
|
Use the `selected` and `onSelect` props to control the selected date:
|
|
87
88
|
|
|
@@ -109,7 +110,7 @@ Use the `min` and `max` props to limit the number of selectable dates.
|
|
|
109
110
|
|
|
110
111
|
### Required Selection
|
|
111
112
|
|
|
112
|
-
By setting the `required` prop, DayPicker
|
|
113
|
+
By setting the `required` prop, DayPicker won't allow unselect the selected dates.
|
|
113
114
|
|
|
114
115
|
```tsx
|
|
115
116
|
<DayPicker mode="multiple" required selected={[new Date()]} />
|
|
@@ -158,7 +159,7 @@ Similarly, you can se the `max` prop to set the maximum number of nights.
|
|
|
158
159
|
|
|
159
160
|
### Required Ranges
|
|
160
161
|
|
|
161
|
-
By setting the `required` prop,
|
|
162
|
+
By setting the `required` prop, DayPicker won't allow unselect the selected range.
|
|
162
163
|
|
|
163
164
|
```tsx
|
|
164
165
|
<DayPicker mode="range" required />
|
|
@@ -137,7 +137,7 @@ They are the value of the [`UI`](../api/enumerations/UI.md), [`DayFlag`](../api/
|
|
|
137
137
|
For example, to change the class name of the calendar container:
|
|
138
138
|
|
|
139
139
|
```tsx
|
|
140
|
-
<DayPicker classNames={{
|
|
140
|
+
<DayPicker classNames={{ root: "my-calendar" }} />
|
|
141
141
|
```
|
|
142
142
|
|
|
143
143
|
Or the disabled days:
|
|
@@ -166,7 +166,7 @@ export function MyCalendar() {
|
|
|
166
166
|
classNames={{
|
|
167
167
|
today: `border-amber-500`, // Add a border to today's date
|
|
168
168
|
selected: `bg-amber-500 border-amber-500 text-white`, // Highlight the selected day
|
|
169
|
-
|
|
169
|
+
root: `${defaultClassNames.root} shadow-lg p-5`, // Add a shadow to the root element
|
|
170
170
|
chevron: `${defaultClassNames.chevron} fill-amber-500` // Change the color of the chevron
|
|
171
171
|
}}
|
|
172
172
|
/>
|
|
@@ -108,8 +108,8 @@ In case you are using `fromDate` or `toDate`, replace them with the `hidden` and
|
|
|
108
108
|
|
|
109
109
|
| Removed prop | Notes |
|
|
110
110
|
| ------------ | ------------------------------------------------------------------------------------------------------------ |
|
|
111
|
-
| ~`fromDate`~ | Replace it with `
|
|
112
|
-
| ~`toDate`~ | Replace it with `
|
|
111
|
+
| ~`fromDate`~ | Replace it with `startMonth` and the `hidden` prop and the `before` [Matcher](./api/type-aliases/Matcher.md). |
|
|
112
|
+
| ~`toDate`~ | Replace it with `endMonth` the `hidden` prop and the `after` [Matcher](./api/type-aliases/Matcher.md). |
|
|
113
113
|
|
|
114
114
|
#### Example
|
|
115
115
|
|