@contentful/f36-datepicker 4.52.3 → 4.54.0
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/README.mdx +20 -2
- package/package.json +6 -6
package/README.mdx
CHANGED
|
@@ -64,9 +64,27 @@ You can use Datepicker with the [FormControl](/components/form-control) in order
|
|
|
64
64
|
|
|
65
65
|
```
|
|
66
66
|
|
|
67
|
+
### Limiting the date range
|
|
68
|
+
|
|
69
|
+
Use the `fromDate` and `toDate` properties to limit the available date range.
|
|
70
|
+
|
|
71
|
+
```jsx file=./examples/Datepicker/WithMinMaxDate.tsx
|
|
72
|
+
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
### Multiple months
|
|
76
|
+
|
|
77
|
+
If you need to show more than a month at once, use the `numberOfMonths` property.
|
|
78
|
+
|
|
79
|
+
```jsx file=./examples/Datepicker/WithMultipleMonths.tsx
|
|
80
|
+
|
|
81
|
+
```
|
|
82
|
+
|
|
67
83
|
### Open by default
|
|
68
84
|
|
|
69
|
-
|
|
85
|
+
Use the `defaultIsOpen` property to open the dropdown and display the Calendar by default without user interaction.
|
|
86
|
+
|
|
87
|
+
**Note**: the Calendar closes by pressing the escape key or by clicking outside of the Datepicker.
|
|
70
88
|
|
|
71
89
|
```jsx file=./examples/Datepicker/DefaultOpen.tsx
|
|
72
90
|
|
|
@@ -74,7 +92,7 @@ Open the dropdown and display the Calendar by default without user interaction
|
|
|
74
92
|
|
|
75
93
|
### Custom
|
|
76
94
|
|
|
77
|
-
If you need a custom solution, you can build it by leveraging our lower-level components, such as Calendar, Popover, and TextInput.
|
|
95
|
+
If you need a custom solution, you can build it by leveraging our lower-level components, such as [Calendar](/components/calendar), [Popover](/components/popover), and [TextInput](/components/text-input).
|
|
78
96
|
For example, Datepicker that uses text input as a trigger without a button.
|
|
79
97
|
|
|
80
98
|
```jsx file=./examples/Datepicker/Custom.tsx
|
package/package.json
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/f36-datepicker",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.54.0",
|
|
4
4
|
"description": "Forma 36: Datepicker component",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "tsup"
|
|
7
7
|
},
|
|
8
8
|
"dependencies": {
|
|
9
|
-
"@contentful/f36-core": "^4.
|
|
10
|
-
"@contentful/f36-typography": "^4.
|
|
11
|
-
"@contentful/f36-forms": "^4.
|
|
12
|
-
"@contentful/f36-popover": "^4.
|
|
9
|
+
"@contentful/f36-core": "^4.54.0",
|
|
10
|
+
"@contentful/f36-typography": "^4.54.0",
|
|
11
|
+
"@contentful/f36-forms": "^4.54.0",
|
|
12
|
+
"@contentful/f36-popover": "^4.54.0",
|
|
13
13
|
"@contentful/f36-icons": "^4.27.0",
|
|
14
|
-
"@contentful/f36-button": "^4.
|
|
14
|
+
"@contentful/f36-button": "^4.54.0",
|
|
15
15
|
"@contentful/f36-tokens": "^4.0.2",
|
|
16
16
|
"emotion": "^10.0.17",
|
|
17
17
|
"date-fns": "^2.28.0",
|