@xsolla/xui-date-picker 0.99.0 → 0.100.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.md +242 -25
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -1,46 +1,263 @@
|
|
|
1
|
-
|
|
1
|
+
---
|
|
2
|
+
title: Date Picker
|
|
3
|
+
subtitle: Calendar date selection.
|
|
4
|
+
description: A cross-platform React date picker with single date and date range selection, locale support, and calendar navigation.
|
|
5
|
+
---
|
|
2
6
|
|
|
3
|
-
Date
|
|
7
|
+
# Date Picker
|
|
8
|
+
|
|
9
|
+
A cross-platform React date picker component with an input field that opens a calendar dropdown for date selection.
|
|
4
10
|
|
|
5
11
|
## Installation
|
|
6
12
|
|
|
7
13
|
```bash
|
|
14
|
+
npm install @xsolla/xui-date-picker
|
|
15
|
+
# or
|
|
8
16
|
yarn add @xsolla/xui-date-picker
|
|
9
17
|
```
|
|
10
18
|
|
|
11
|
-
##
|
|
19
|
+
## Demo
|
|
20
|
+
|
|
21
|
+
### Single Date Selection
|
|
12
22
|
|
|
13
23
|
```tsx
|
|
24
|
+
import * as React from 'react';
|
|
14
25
|
import { DatePicker } from '@xsolla/xui-date-picker';
|
|
15
26
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
27
|
+
export default function SingleDate() {
|
|
28
|
+
const [date, setDate] = React.useState<Date | null>(null);
|
|
29
|
+
|
|
30
|
+
return (
|
|
31
|
+
<DatePicker
|
|
32
|
+
selectedDate={date}
|
|
33
|
+
onChange={(newDate) => setDate(newDate as Date)}
|
|
34
|
+
placeholder="Select a date"
|
|
35
|
+
/>
|
|
36
|
+
);
|
|
37
|
+
}
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### Date Range Selection
|
|
41
|
+
|
|
42
|
+
```tsx
|
|
43
|
+
import * as React from 'react';
|
|
44
|
+
import { DatePicker } from '@xsolla/xui-date-picker';
|
|
45
|
+
|
|
46
|
+
export default function DateRange() {
|
|
47
|
+
const [startDate, setStartDate] = React.useState<Date | null>(null);
|
|
48
|
+
const [endDate, setEndDate] = React.useState<Date | null>(null);
|
|
49
|
+
|
|
50
|
+
return (
|
|
51
|
+
<DatePicker
|
|
52
|
+
selectsRange
|
|
53
|
+
startDate={startDate}
|
|
54
|
+
endDate={endDate}
|
|
55
|
+
onChange={(range) => {
|
|
56
|
+
const [start, end] = range as [Date | null, Date | null];
|
|
57
|
+
setStartDate(start);
|
|
58
|
+
setEndDate(end);
|
|
59
|
+
}}
|
|
60
|
+
/>
|
|
61
|
+
);
|
|
62
|
+
}
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
### Different Sizes
|
|
66
|
+
|
|
67
|
+
```tsx
|
|
68
|
+
import * as React from 'react';
|
|
69
|
+
import { DatePicker } from '@xsolla/xui-date-picker';
|
|
70
|
+
|
|
71
|
+
export default function Sizes() {
|
|
72
|
+
return (
|
|
73
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
|
74
|
+
<DatePicker size="sm" placeholder="Small" />
|
|
75
|
+
<DatePicker size="md" placeholder="Medium" />
|
|
76
|
+
<DatePicker size="lg" placeholder="Large" />
|
|
77
|
+
</div>
|
|
78
|
+
);
|
|
79
|
+
}
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
## Anatomy
|
|
83
|
+
|
|
84
|
+
```jsx
|
|
85
|
+
import { DatePicker } from '@xsolla/xui-date-picker';
|
|
20
86
|
|
|
21
|
-
{/* Range mode */}
|
|
22
87
|
<DatePicker
|
|
23
|
-
|
|
24
|
-
startDate={
|
|
25
|
-
endDate={
|
|
26
|
-
|
|
88
|
+
selectedDate={date} // Selected date (single mode)
|
|
89
|
+
startDate={startDate} // Start date (range mode)
|
|
90
|
+
endDate={endDate} // End date (range mode)
|
|
91
|
+
selectsRange={false} // Enable range selection
|
|
92
|
+
onChange={handleChange} // Change callback
|
|
93
|
+
size="md" // Input size
|
|
94
|
+
locale="enUS" // Date locale
|
|
95
|
+
placeholder="MM/DD/YYYY" // Input placeholder
|
|
96
|
+
backgroundColor={color} // Custom background
|
|
27
97
|
/>
|
|
28
98
|
```
|
|
29
99
|
|
|
30
|
-
##
|
|
100
|
+
## Examples
|
|
101
|
+
|
|
102
|
+
### With Initial Date
|
|
103
|
+
|
|
104
|
+
```tsx
|
|
105
|
+
import * as React from 'react';
|
|
106
|
+
import { DatePicker } from '@xsolla/xui-date-picker';
|
|
107
|
+
|
|
108
|
+
export default function InitialDate() {
|
|
109
|
+
const [date, setDate] = React.useState<Date>(new Date(2024, 0, 15));
|
|
110
|
+
|
|
111
|
+
return (
|
|
112
|
+
<DatePicker
|
|
113
|
+
selectedDate={date}
|
|
114
|
+
onChange={(newDate) => setDate(newDate as Date)}
|
|
115
|
+
/>
|
|
116
|
+
);
|
|
117
|
+
}
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
### With Date Constraints
|
|
121
|
+
|
|
122
|
+
```tsx
|
|
123
|
+
import * as React from 'react';
|
|
124
|
+
import { DatePicker } from '@xsolla/xui-date-picker';
|
|
125
|
+
|
|
126
|
+
export default function DateConstraints() {
|
|
127
|
+
const [date, setDate] = React.useState<Date | null>(null);
|
|
128
|
+
const today = new Date();
|
|
129
|
+
const nextMonth = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate());
|
|
130
|
+
|
|
131
|
+
return (
|
|
132
|
+
<DatePicker
|
|
133
|
+
selectedDate={date}
|
|
134
|
+
onChange={(newDate) => setDate(newDate as Date)}
|
|
135
|
+
minDate={today}
|
|
136
|
+
maxDate={nextMonth}
|
|
137
|
+
placeholder="Select within next 30 days"
|
|
138
|
+
/>
|
|
139
|
+
);
|
|
140
|
+
}
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
### Booking Date Range
|
|
144
|
+
|
|
145
|
+
```tsx
|
|
146
|
+
import * as React from 'react';
|
|
147
|
+
import { DatePicker } from '@xsolla/xui-date-picker';
|
|
148
|
+
|
|
149
|
+
export default function BookingRange() {
|
|
150
|
+
const [startDate, setStartDate] = React.useState<Date | null>(null);
|
|
151
|
+
const [endDate, setEndDate] = React.useState<Date | null>(null);
|
|
152
|
+
|
|
153
|
+
const handleChange = (range: [Date | null, Date | null]) => {
|
|
154
|
+
const [start, end] = range;
|
|
155
|
+
setStartDate(start);
|
|
156
|
+
setEndDate(end);
|
|
157
|
+
|
|
158
|
+
if (start && end) {
|
|
159
|
+
const nights = Math.ceil((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24));
|
|
160
|
+
console.log(`${nights} night(s) selected`);
|
|
161
|
+
}
|
|
162
|
+
};
|
|
163
|
+
|
|
164
|
+
return (
|
|
165
|
+
<div>
|
|
166
|
+
<DatePicker
|
|
167
|
+
selectsRange
|
|
168
|
+
startDate={startDate}
|
|
169
|
+
endDate={endDate}
|
|
170
|
+
onChange={handleChange}
|
|
171
|
+
placeholder="Check-in - Check-out"
|
|
172
|
+
/>
|
|
173
|
+
{startDate && endDate && (
|
|
174
|
+
<p>
|
|
175
|
+
{startDate.toLocaleDateString()} to {endDate.toLocaleDateString()}
|
|
176
|
+
</p>
|
|
177
|
+
)}
|
|
178
|
+
</div>
|
|
179
|
+
);
|
|
180
|
+
}
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
### With Locale
|
|
184
|
+
|
|
185
|
+
```tsx
|
|
186
|
+
import * as React from 'react';
|
|
187
|
+
import { DatePicker } from '@xsolla/xui-date-picker';
|
|
188
|
+
|
|
189
|
+
export default function LocalizedPicker() {
|
|
190
|
+
const [date, setDate] = React.useState<Date | null>(null);
|
|
191
|
+
|
|
192
|
+
return (
|
|
193
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
|
194
|
+
<DatePicker
|
|
195
|
+
selectedDate={date}
|
|
196
|
+
onChange={(d) => setDate(d as Date)}
|
|
197
|
+
locale="enUS"
|
|
198
|
+
placeholder="English (US)"
|
|
199
|
+
/>
|
|
200
|
+
<DatePicker
|
|
201
|
+
selectedDate={date}
|
|
202
|
+
onChange={(d) => setDate(d as Date)}
|
|
203
|
+
locale="de"
|
|
204
|
+
placeholder="German"
|
|
205
|
+
/>
|
|
206
|
+
</div>
|
|
207
|
+
);
|
|
208
|
+
}
|
|
209
|
+
```
|
|
210
|
+
|
|
211
|
+
## API Reference
|
|
31
212
|
|
|
32
213
|
### DatePicker
|
|
33
214
|
|
|
215
|
+
**DatePickerProps:**
|
|
216
|
+
|
|
34
217
|
| Prop | Type | Default | Description |
|
|
35
|
-
|
|
36
|
-
|
|
|
37
|
-
|
|
|
38
|
-
|
|
|
39
|
-
|
|
|
40
|
-
|
|
|
41
|
-
|
|
|
42
|
-
|
|
|
43
|
-
|
|
|
44
|
-
|
|
|
45
|
-
|
|
|
46
|
-
|
|
|
218
|
+
| :--- | :--- | :------ | :---------- |
|
|
219
|
+
| selectedDate | `Date` | - | Selected date for single mode. |
|
|
220
|
+
| startDate | `Date` | - | Start date for range mode. |
|
|
221
|
+
| endDate | `Date` | - | End date for range mode. |
|
|
222
|
+
| selectsRange | `boolean` | `false` | Enable date range selection. |
|
|
223
|
+
| onChange | `(date: Date \| [Date, Date]) => void` | - | Date change callback. |
|
|
224
|
+
| size | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | `"md"` | Input size variant. |
|
|
225
|
+
| locale | `string` | `"enUS"` | Date-fns locale identifier. |
|
|
226
|
+
| placeholder | `string` | `"MM/DD/YYYY"` | Input placeholder text. |
|
|
227
|
+
| minDate | `Date` | - | Minimum selectable date. |
|
|
228
|
+
| maxDate | `Date` | - | Maximum selectable date. |
|
|
229
|
+
| backgroundColor | `string` | - | Custom background color. |
|
|
230
|
+
| testID | `string` | - | Test identifier. |
|
|
231
|
+
|
|
232
|
+
## Date Format
|
|
233
|
+
|
|
234
|
+
The component displays dates in `MM/DD/YYYY` format:
|
|
235
|
+
|
|
236
|
+
| Mode | Display Format |
|
|
237
|
+
| :--- | :------------- |
|
|
238
|
+
| Single | `01/15/2024` |
|
|
239
|
+
| Range | `01/15/2024 - 01/20/2024` |
|
|
240
|
+
|
|
241
|
+
## Calendar Features
|
|
242
|
+
|
|
243
|
+
- **Month navigation**: Previous/next month buttons
|
|
244
|
+
- **Year navigation**: Year selection dropdown
|
|
245
|
+
- **Today indicator**: Current date is highlighted
|
|
246
|
+
- **Selected state**: Selected date(s) have distinct styling
|
|
247
|
+
- **Range highlighting**: Dates between start and end are highlighted
|
|
248
|
+
- **Disabled dates**: Dates outside min/max range are disabled
|
|
249
|
+
|
|
250
|
+
## Behavior
|
|
251
|
+
|
|
252
|
+
- Calendar opens on input focus
|
|
253
|
+
- Calendar closes when a date is selected (single mode)
|
|
254
|
+
- Calendar closes when both dates are selected (range mode)
|
|
255
|
+
- Clicking outside closes the calendar
|
|
256
|
+
- Input value updates immediately on selection
|
|
257
|
+
|
|
258
|
+
## Accessibility
|
|
259
|
+
|
|
260
|
+
- Input is keyboard accessible
|
|
261
|
+
- Calendar dates are navigable via keyboard
|
|
262
|
+
- Selected dates are announced to screen readers
|
|
263
|
+
- Focus is managed when calendar opens/closes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-date-picker",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.100.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -10,11 +10,11 @@
|
|
|
10
10
|
"build:native": "PLATFORM=native tsup"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@xsolla/xui-button": "0.
|
|
14
|
-
"@xsolla/xui-core": "0.
|
|
15
|
-
"@xsolla/xui-input": "0.
|
|
16
|
-
"@xsolla/xui-primitives-core": "0.
|
|
17
|
-
"@xsolla/xui-select": "0.
|
|
13
|
+
"@xsolla/xui-button": "0.100.0",
|
|
14
|
+
"@xsolla/xui-core": "0.100.0",
|
|
15
|
+
"@xsolla/xui-input": "0.100.0",
|
|
16
|
+
"@xsolla/xui-primitives-core": "0.100.0",
|
|
17
|
+
"@xsolla/xui-select": "0.100.0",
|
|
18
18
|
"date-fns": "^3.0.0"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|