best-react-datepicker 0.2.3 → 0.2.4
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.md +27 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
The most customizable, accessible, zero-dependency React date picker.
|
|
4
4
|
|
|
5
|
+
<p align="center">
|
|
6
|
+
<img src="./assets/datepicker.png" alt="DatePicker" width="380"/>
|
|
7
|
+
<img src="./assets/dark-mode.png" alt="Dark mode" width="380"/>
|
|
8
|
+
</p>
|
|
9
|
+
|
|
5
10
|
- **7 picker components** — DatePicker, RangePicker, TimePicker, DateTimePicker, MonthPicker, YearPicker, WeekPicker
|
|
6
11
|
- **Zero dependencies** — only React as a peer dependency
|
|
7
12
|
- **Fully accessible** — keyboard navigation, ARIA labels, screen reader announcements
|
|
@@ -42,6 +47,8 @@ function App() {
|
|
|
42
47
|
|
|
43
48
|
### DatePicker
|
|
44
49
|
|
|
50
|
+
<img src="./assets/datepicker.png" alt="DatePicker" width="380"/>
|
|
51
|
+
|
|
45
52
|
Single date selection with optional constraints.
|
|
46
53
|
|
|
47
54
|
```tsx
|
|
@@ -59,6 +66,8 @@ Single date selection with optional constraints.
|
|
|
59
66
|
|
|
60
67
|
### RangePicker
|
|
61
68
|
|
|
69
|
+
<img src="./assets/rangepicker.png" alt="RangePicker" width="720"/>
|
|
70
|
+
|
|
62
71
|
Date range selection with optional presets.
|
|
63
72
|
|
|
64
73
|
```tsx
|
|
@@ -77,6 +86,8 @@ const presets = createPresets();
|
|
|
77
86
|
|
|
78
87
|
**Compact mode** — single calendar with presets below:
|
|
79
88
|
|
|
89
|
+
<img src="./assets/rangepicker-compact.png" alt="RangePicker compact" width="380"/>
|
|
90
|
+
|
|
80
91
|
```tsx
|
|
81
92
|
<RangePicker
|
|
82
93
|
value={range}
|
|
@@ -90,6 +101,8 @@ const presets = createPresets();
|
|
|
90
101
|
|
|
91
102
|
### TimePicker
|
|
92
103
|
|
|
104
|
+
<img src="./assets/timepicker.png" alt="TimePicker" width="300"/>
|
|
105
|
+
|
|
93
106
|
```tsx
|
|
94
107
|
<TimePicker
|
|
95
108
|
value={time}
|
|
@@ -101,6 +114,8 @@ const presets = createPresets();
|
|
|
101
114
|
|
|
102
115
|
### DateTimePicker
|
|
103
116
|
|
|
117
|
+
<img src="./assets/datetimepicker.png" alt="DateTimePicker" width="380"/>
|
|
118
|
+
|
|
104
119
|
Combined date and time selection with tabbed interface.
|
|
105
120
|
|
|
106
121
|
```tsx
|
|
@@ -113,6 +128,8 @@ Combined date and time selection with tabbed interface.
|
|
|
113
128
|
|
|
114
129
|
### MonthPicker
|
|
115
130
|
|
|
131
|
+
<img src="./assets/monthpicker.png" alt="MonthPicker" width="300"/>
|
|
132
|
+
|
|
116
133
|
```tsx
|
|
117
134
|
<MonthPicker
|
|
118
135
|
value={monthDate}
|
|
@@ -123,6 +140,8 @@ Combined date and time selection with tabbed interface.
|
|
|
123
140
|
|
|
124
141
|
### YearPicker
|
|
125
142
|
|
|
143
|
+
<img src="./assets/yearpicker.png" alt="YearPicker" width="300"/>
|
|
144
|
+
|
|
126
145
|
```tsx
|
|
127
146
|
<YearPicker
|
|
128
147
|
value={year}
|
|
@@ -133,6 +152,8 @@ Combined date and time selection with tabbed interface.
|
|
|
133
152
|
|
|
134
153
|
### WeekPicker
|
|
135
154
|
|
|
155
|
+
<img src="./assets/weekpicker.png" alt="WeekPicker" width="380"/>
|
|
156
|
+
|
|
136
157
|
```tsx
|
|
137
158
|
<WeekPicker
|
|
138
159
|
onChange={(start, end, weekNumber) => {
|
|
@@ -143,6 +164,8 @@ Combined date and time selection with tabbed interface.
|
|
|
143
164
|
|
|
144
165
|
## Size Variants
|
|
145
166
|
|
|
167
|
+
<img src="./assets/sizes.png" alt="Size variants" width="640"/>
|
|
168
|
+
|
|
146
169
|
All pickers accept a `size` prop: `"sm"`, `"md"` (default), or `"lg"`.
|
|
147
170
|
|
|
148
171
|
```tsx
|
|
@@ -182,6 +205,8 @@ Built-in preset keys: `today`, `yesterday`, `last7`, `last30`, `thisMonth`, `las
|
|
|
182
205
|
|
|
183
206
|
## Theming
|
|
184
207
|
|
|
208
|
+
<img src="./assets/theming.png" alt="Theming" width="640"/>
|
|
209
|
+
|
|
185
210
|
Override CSS variables to match your brand:
|
|
186
211
|
|
|
187
212
|
```tsx
|
|
@@ -196,6 +221,8 @@ Override CSS variables to match your brand:
|
|
|
196
221
|
|
|
197
222
|
### Dark Mode
|
|
198
223
|
|
|
224
|
+
<img src="./assets/dark-mode.png" alt="Dark mode" width="380"/>
|
|
225
|
+
|
|
199
226
|
```tsx
|
|
200
227
|
<div className="brdp-dark">
|
|
201
228
|
<DatePicker placeholder="Dark mode" />
|