Date Picker
A date picker component with range and presets.
Usage#
API Reference#
| Prop | Type | Default |
|---|---|---|
aria-describedby | string | - |
aria-details | string | - |
aria-label | string | - |
aria-labelledby | string | - |
autoFocus | boolean | - |
defaultOpen | boolean | - |
description | ReactNode | - |
errorMessage | ReactNode| function | - |
hideTimeZone | boolean | - |
hourCycle | 12| 24 | - |
id | string | - |
isDisabled | boolean | - |
isInvalid | boolean | - |
isOpen | boolean | - |
isReadOnly | boolean | - |
isRequired | boolean | - |
label | ReactNode | - |
name | string | - |
onBlur | function | - |
onFocus | function | - |
onFocusChange | function | - |
onKeyDown | function | - |
onKeyUp | function | - |
onOpenChange | function | - |
pageBehavior | PageBehavior | - |
placeholderValue | CalendarDate| CalendarDateTime | - |
shouldForceLeadingZeros | boolean | - |
validate | function | - |
validationBehavior | "aria"| "native" | - |
Examples#
Controlled Date Picker#
Manage and store the value of the date picker in a state variable for controlled behavior. This is also useful for form integration.
Date Picker With Time#
Enable time selection with different granularity levels for precise scheduling.
Min/Max Values#
Restrict date selection to a specific range by setting minimum and maximum values.
In the example below, you can only select dates within the next 30 days. Dates outside the range are disabled.
Disabled Dates#
Disable specific dates like weekends and holidays to prevent selection of unavailable dates.
The example below disables weekends and holidays like Christmas.
Granularity Options#
Different levels of time precision from date-only to second-precision selection.
Form Integration#
The following example shows how to use the date picker in a form, with simulated form submission.