Date Picker
A component for rendering date picker inputs with range and presets.
In this guide, you'll learn how to use the Date Picker component.
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.
Date Picker 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.
Date Picker Disabled Dates#
Disable specific dates like weekends and holidays to prevent selection of unavailable dates.
The example below disables weekends and holidays like Christmas.
Date Picker Granularity Options#
Different levels of time precision from date-only to second-precision selection.
Date Picker Form Integration#
The following example shows how to use the date picker in a form, with simulated form submission.