Date Picker (Radix UI)
A date input component that combines a calendar popover with an input field.
Installation
The Date Picker is built using a composition of the Popover and the Calendar components.
Examples
Date & Time
Range
Presets
Form
API Reference
This component is built using react-day-picker and Radix UI Popover primitives. For detailed information about the calendar functionality, please visit the react-day-picker documentation.
Calendar
This component is based on the DayPicker component from react-day-picker. For all available props, refer to the react-day-picker documentation. The component includes the following custom styling props:
| Prop | Type | Default |
|---|---|---|
className | ||
classNames |
DatePickerTrigger
The trigger button that opens the date picker popover.
| Prop | Type | Default |
|---|---|---|
asInput | ||
placeholder | ||
className |
DatePickerContent
The popover content that contains the calendar. This component extends Radix UI's Popover.Content.
| Prop | Type | Default |
|---|---|---|
className | ||
align |
DatePickerPresets
A component for displaying preset date ranges.
| Prop | Type | Default |
|---|---|---|
presets | ||
onSelect | ||
className |
Credits
- Built with React DayPicker.
- Built with Radix UI Popover.