Date Range Picker
Date range pickers make date based data easier to read and explore, letting users select precise start and end dates for accurate filtering and reporting.
Installation
Install the component via the CLI in one command.
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
Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.
npm install react-aria-components @heroicons/react tailwind-merge
Examples
Validation
Ensure that the date range picker is properly filled out by using the isRequired prop.
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
You can control the duration of the visible date range by using the visibleDuration prop. It accepts an object with the following properties:
years: The number of years to add or subtract.months: The number of months to add or subtract.weeks: The number of weeks to add or subtract.days: The number of days to add or subtract.
Learn more about the visible duration in the rac documentation.
Controlled
Take control of your date range picker by passing a value prop to manage 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
The DateRangePicker component lets users select a date range.
| Prop | Type | Default |
|---|---|---|
className | string | - |
pageBehavior | "visible" | "single" | - |
popover | Omit<PopoverProps, "children"> | - |
visibleDuration | DateDuration | { months: 1 } |
DateRangePickerTrigger
The DateRangePickerTrigger component wraps the date range picker trigger controls.
| Prop | Type | Default |
|---|---|---|
className | string | - |
See the React Aria for the full API reference.
Unlock the full power ofIntent UI Design
Build modern web apps faster with 1000+ resources across components, blocks, patterns, templates, and starter kits.