Date Picker
Installation
Add the component with the CLI.
npx shadcn@latest add @intentui/date-picker
Composed components
When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.
Manual installation
Install the dependencies, then copy the component source into your project.
npm install cn react-aria-components @heroicons/react
Examples
Date and time
While not a full-fledged date-time picker, this setup lets you edit both date and time in a segmented field.
Validation
Set isRequired to require a date when the form is submitted.
Custom validation
Use validate to check the date and return an error message or an array of messages for invalid values.
Controlled
Pass value and update it with onChange to control the selected date.
Disabled
When the date picker is disabled, it becomes non-interactive and visually represents a disabled state.
Component API
DatePicker
DatePicker extends the React Aria Components <DatePicker> component.
classNamestringpopoverOmit<PopoverProps, "children">DatePickerOverlay
DatePickerOverlay extends the React Aria Components <Popover> component.
pageBehavior"visible" | "single"visiblerangebooleanvisibleDurationDateDuration{ months: 1 }DatePickerTrigger
DatePickerTrigger extends the React Aria Components <Group> component.
classNamestringSee the React Aria for the full API reference.
