Date picker
React componentSelect a date or range in a keyboard-navigable calendar.
Try it out
Use the live controls or open the Code tab to view and copy the example.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
API reference
Generated from the package’s TypeScript exports. Standard React event and ARIA attributes are also accepted where the component wraps a native element.
| Prop | Type | Description |
|---|---|---|
label | string | undefined | A meaningful visible or accessible label. |
month | Date | undefined | See the typed definition and working example for this option. |
defaultMonth | Date | undefined | See the typed definition and working example for this option. |
onMonthChange | ((month: Date) => void) | undefined | See the typed definition and working example for this option. |
disabled | Matcher | Matcher[] | undefined | Disables interaction (or date matchers for DatePicker). |
numberOfMonths | 1 | 2 | undefined | See the typed definition and working example for this option. |
name | string | undefined | Field name used in form submission. |
locale | Partial<DayPickerLocale> | undefined | See the typed definition and working example for this option. |
startMonth | Date | undefined | See the typed definition and working example for this option. |
endMonth | Date | undefined | See the typed definition and working example for this option. |
mode | "range" | "single" | undefined | See the typed definition and working example for this option. |
value | Date | DateRange | undefined | Controlled value. Pair with its change callback. |
defaultValue | Date | DateRange | undefined | Initial value for uncontrolled usage. |
onValueChange | ((value: Date | undefined) => void) | ((value: DateRange | undefined) => void) | undefined | Called with the next value. Update controlled state here. |
Accessibility & interaction
React DayPicker supports single/range selection, one/two months, localized labels, month navigation and disabled matchers. Values are Date objects.
Visible focus, reduced motion, and both color themes are shared across staqui. Choose labels and document structure that make sense in your application; automated checks do not replace assistive-technology testing.
Variants & implementation notes
React DayPicker supports single/range selection, one/two months, localized labels, month navigation and disabled matchers. Values are Date objects.
Use the typed API above for the supported variants. The example demonstrates the primary composition; shared controls inherit hover, focus, active and disabled treatment where applicable.