Content
- State a limit in the hint: “Up to 31 days”.
- Say what to change in the error: “Choose 31 days or fewer.”
Date range selector
Two bounded dates chosen together, with the presets that cover most of what anyone actually asks for.
Try it
Pick a preset or click two days, then Apply.
Reporting periodBore 12 · Emu Park
Includes today’s readings so far.
{ from: '2026-08-30', to: '2026-09-28', preset: 'last_30days' }
Size
Months
Presets
Max 31 days
Future days
Error
Disabled
<WDateRangeSelector
value={period}
onChange={setPeriod}
label="Reporting period"
hint="Bore 12 · Emu Park"
size="sm"
max={today}
/>When to use
- Use it to set a reporting or export period.
- Keep the presets on for common periods.
Don’t use it
- For one date. Use Date picker.
- For a date and a time. Use Date time picker.
Anatomy
A field showing the period, and a panel of presets, months and footer.
a preset
a custom range
Selection
Click a start, then an end; the band follows the pointer.
start chosen, end previewed
range set
one day
today
today in a range
hover
keyboard focus
unavailable
4 to 9 September
Presets
A preset keeps its id, so a saved report keeps rolling forward.
| Preset | Covers |
|---|---|
| Last 7, 30, 60 or 90 days | Up to and including today. |
| This month | The 1st to today. |
| Last month, 2 or 3 months | Whole months before this one. |
Limits
maxDays caps the range; here, 31 days. Days and presets past it grey out.
Sizes and states
sm · preset
lg · custom range
empty
across a year
Locked while readings load.
disabled
Choose 31 days or fewer.
error
In context
Accessibility
Days read their full date and place in the range.
| Key | What it does |
|---|---|
| Enter / Space / ↑ / ↓ | On the field, opens the panel. |
| ↑ / ↓ | Moves through presets; ← / → in a row. |
| Enter | On a preset, applies it; on Custom, moves to the days. |
| Enter / Space | On a day, sets the start, then the end. |
| Arrow keys | On the days, a day or a week. |
| Home / End | First or last preset; week start or end. |
| Page Up / Down | A month; with Shift, a year. |
| Tab | Stays in the panel. |
| Escape | Closes without changes. |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | { from, to, preset } | null | { preset: 'last_30days' } | YYYY-MM-DD dates; a preset id wins. |
| onChange | (range) => void | — | Fires when a range is applied. |
| presets | { id, label, range }[] | false | the eight | false hides the list. |
| today | string | today | What presets count from. |
| min / max | string | — | First and last usable days. |
| maxDays | number | — | Longest range, both ends counted. |
| months | 1 | 2 | 2 | Drops to one without room. |
| weekStartsOn | 0 | 1 | 1 | 1 is Monday, 0 is Sunday. |
| label / hint / help | string | — | Name, side note, guidance below. |
| error | boolean | string | false | A string shows below. |
| size | 'sm' | 'lg' | 'sm' | 36 or 44px high. |
| align | 'start' | 'end' | 'start' | Field edge the panel aligns to. |
| placeholder | string | 'Choose a period' | Shown when empty. |
| disabled | boolean | false | Keeps the field shut. |
| ariaLabel | string | — | Names the field without a label. |
| width | number | string | 300 | Field width. |
Tokens
| Token | Value | Where it lands |
|---|---|---|
| --global-blue-1000 | #1877F2 | Range ends and focus ring. |
| --global-blue-1100 | #0C296A | Band ink, today, hovered ends. |
| --global-blue-100 / -200 / -300 | #EBFAFF / #D6F4FF / #BDEDFF | Previewed band; band and chosen preset; hover. |
| --global-neutral-grey-1100 / -1300 | #2D2B32 / #0A090B | Field value, days, presets; months, hover. |
| --global-neutral-grey-1000 | #4F4D55 | Placeholder, weekdays, counts, hint. |
| --global-neutral-grey-600 | #DCDCDE | Field border. |
| --global-red-800 | #E12121 | Field border on error. |
| --global-neutral-grey-700 / -900 | #C9C9CC / #7F7D83 | Unavailable days; inside the band. |
| --global-neutral-grey-300 | #F1F1F1 | Hover fills. |
| --global-neutral-grey-400 / -500 | #ECECED / #E6E6E6 | Dividers; the panel border. |
| --radius-lg / -xl | 8px / 12px | Day cells; the panel. |
| --shadow-dropdown | 0 4px 12px … | The panel. |