@xsolla/xui-date-picker 0.174.3 → 0.175.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 +37 -1
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,6 +1,42 @@
|
|
|
1
1
|
# DatePicker
|
|
2
|
-
|
|
3
2
|
A cross-platform date picker with an input field that opens a single- or dual-month calendar dropdown for date or range selection.
|
|
3
|
+
<!-- BEGIN:xui-mcp-instructions:date-picker -->
|
|
4
|
+
It’s a form field that lets users select a single date or date range. It is always used together with Calendar — the panel that opens on click and provides the interactive date grid. DatePicker handles the input trigger; Calendar handles the selection UI.
|
|
5
|
+
|
|
6
|
+
### When to use
|
|
7
|
+
- When a user needs to select a specific date (booking, expiry, deadline, birth date)
|
|
8
|
+
- When filtering or reporting by date or date range
|
|
9
|
+
- When a calendar view helps the user orient themselves in time
|
|
10
|
+
- When you need to prevent free-text date format errors
|
|
11
|
+
|
|
12
|
+
### When not to use
|
|
13
|
+
- When the date is derived automatically and not user-selected
|
|
14
|
+
|
|
15
|
+
### Content guidelines
|
|
16
|
+
- Placeholder text: use *"Choose a date"* for single mode and *"Enter a date range"* for range mode — these are the defaults.
|
|
17
|
+
- Labels (via Field Group): keep them short and clear — *"Date"*, *"Start date"*, *"Report period"*.
|
|
18
|
+
- Error messages: explain what went wrong — *"Please select a date"* or *"End date must be after start date"*.
|
|
19
|
+
- Use standard labels — Today, Yesterday, Last 7 days, Last 30 days, This month, Last month. Chip labels are shown directly in the DatePicker field when a chip is selected, so keep them short and self-explanatory — the label must make sense both in the chip row and as standalone field content.
|
|
20
|
+
|
|
21
|
+
### Behaviour guidelines
|
|
22
|
+
- When the DatePicker is clicked, the Calendar panel opens anchored below the field (or above if there is not enough space below).
|
|
23
|
+
- Single date mode: selecting a date closes the panel immediately and fills the field.
|
|
24
|
+
- Range mode: first click sets the start date; second click sets the end date and closes the panel. Hovering after the first click shows a range preview. If the second date is before the first, the range resets and the clicked date becomes the new start.
|
|
25
|
+
- When the user selects a chip (e.g. Last 30 days, Last 7 days, Today), the DatePicker field displays the chip label instead of the date range. This makes the selection immediately scannable — the user sees *"Last 30 days"* rather than *"Mar 12, 2025 — Apr 11, 2025"*. If the user then manually adjusts the range by clicking on dates, the field switches back to showing the explicit date range.
|
|
26
|
+
- Pressing Escape closes the panel without changing the selection and returns focus to the field.
|
|
27
|
+
- The Calendar panel does not shift page layout — it renders as a floating overlay above content.
|
|
28
|
+
- When Range=True is set on DatePicker, always set Months=Two and Range=True on Calendar.
|
|
29
|
+
- When the panel opens, focus moves to the selected date cell, or to today's date if nothing is selected.
|
|
30
|
+
- When the panel closes, focus returns to the DatePicker field.
|
|
31
|
+
|
|
32
|
+
### Accessibility
|
|
33
|
+
- Apply role=*"dialog"* and aria-modal=*"true"* to the Calendar panel container.
|
|
34
|
+
- Apply aria-label=*"Choose a date"* (or range equivalent) to the dialog.
|
|
35
|
+
- Apply aria-selected=*"true"* to selected date cells.
|
|
36
|
+
- Apply aria-disabled=*"true"* to disabled cells and to the DatePicker field when State=Disable.
|
|
37
|
+
- Apply aria-current=*"date"* to today's date cell.
|
|
38
|
+
- Use aria-live to announce month navigation changes to screen readers.
|
|
39
|
+
<!-- END:xui-mcp-instructions:date-picker -->
|
|
4
40
|
|
|
5
41
|
## Installation
|
|
6
42
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-date-picker",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.175.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -13,10 +13,10 @@
|
|
|
13
13
|
"test:coverage": "vitest run --coverage"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@xsolla/xui-calendar": "0.
|
|
17
|
-
"@xsolla/xui-core": "0.
|
|
18
|
-
"@xsolla/xui-input": "0.
|
|
19
|
-
"@xsolla/xui-primitives-core": "0.
|
|
16
|
+
"@xsolla/xui-calendar": "0.175.0",
|
|
17
|
+
"@xsolla/xui-core": "0.175.0",
|
|
18
|
+
"@xsolla/xui-input": "0.175.0",
|
|
19
|
+
"@xsolla/xui-primitives-core": "0.175.0",
|
|
20
20
|
"date-fns": "^3.0.0"
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|