Date Picker
A button that opens a calendar to pick a date or a date range.
- Forms
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add date-pickernpm packages installed: react-day-picker.
import { DatePicker } from "@/components/ui/date-picker";Default
With Value
Disabled
Locales
Range
Paired With Typed Input
<DatePicker>
| Prop | Type | Default |
|---|---|---|
defaultValue | Date | — |
disabled | boolean | — |
labelNames the popover, which carries role="dialog". | string | "Choose a date" |
localeBCP 47 tag for formatting the button label. Defaults to the runtime locale. | string | — |
onValueChange | (date: Date | undefined) => void | — |
placeholder | string | "Pick a date" |
value | Date | — |
className | string | — |
<DateRangePicker>
| Prop | Type | Default |
|---|---|---|
defaultValue | DateRange | — |
disabled | boolean | — |
label | string | "Choose a date range" |
locale | string | — |
numberOfMonthsMonths shown side by side. Two makes most ranges selectable without paging. | number | 2 |
onValueChange | (range: DateRange | undefined) => void | — |
placeholder | string | "Pick a date range" |
value | DateRange | — |
className | string | — |
The trigger states the selected date, formatted for the locale, so its accessible name changes with the value. The popover is named because it carries role="dialog". Selecting a single date closes the popover and returns focus to the trigger; a range stays open, since one click is only half an answer. Offer a typed input alongside it for dates the user already knows.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes