Date Range Picker
Installation
Add the component with the CLI.
npx shadcn@latest add @intentui/date-range-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 react-aria-components @heroicons/react cn
Examples
Validation
Set isRequired to require a date range when the form is submitted.
Custom validation
Use the validate function to implement custom validation rules. It evaluates the current date range and returns error messages if the value doesn't meet your criteria.
Visible duration
Set visibleDuration to choose how much of the calendar is visible. It accepts an object with these duration units:
years: The number of years to display.months: The number of months to display.weeks: The number of weeks to display.days: The number of days to display.
See visible duration in React Aria for details.
Controlled
Pass value and update it with onChange to control the selected date range.
Disabled
When the date range picker is disabled, it becomes non-interactive and is visually represented in a disabled state.
Component API
DateRangePicker
DateRangePicker extends the React Aria Components <DateRangePicker> component.
classNamestringpageBehavior"visible" | "single"popoverOmit<PopoverProps, "children">visibleDurationDateDuration{ months: 1 }DateRangePickerTrigger
DateRangePickerTrigger extends the Intent UI <InputGroup> component.
classNamestringSee the React Aria for the full API reference.
