Date Range Picker
Date Range Pickers are essential for displaying date-based information clearly and enhancing user interaction with precise date selections.
Basic
A range calendar displays one or more date grids and allows users to select a range of dates in a single interaction.
Installation
If you hit any issues, make sure you check out the installation guide here for more information.
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.
The Date Range Picker comes packed with several components to enhance functionality and provide a seamless experience.
Manual Installation
Make sure you also install the composed components and the required packages for the component to function properly.
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.
Friday, February 28, 2025 to Wednesday, March 12, 2025
2025-02-28 to 2025-03-12
Disabled
When the date range picker is disabled, it becomes non-interactive and is visually represented in a disabled state.