Date Range Picker

Date Range Pickers are crucial for conveying date-based info effectively, improving user interaction with accurate date selections.

If you are using Tailwind v4, please refer to the 2.x documentation. This documentation assumes you are using Tailwind v3.

Basic

A range calendar displays one or more date grids and allows users to select a range of dates in a single interaction.

Event date

Installation

If you hit any issues, make sure you check out the installation guide here.

Composed Components

When you plug this component from the CLI, it autoloads all the composed components. No need to toss 'em in one at a time.

The Date Range Picker's decked out with several components to make it bangin'.

Field

Field's a core piece every other component uses. It flexes reusable styles, showing up in inputs, labels, descriptions, and more.

Date Field

Enter dates directly into this field, perfect for logging events or deadlines with the precision of a historian noting important events.

Date Picker

Pop up a calendar, click a date, and it’s set. It’s like pointing at a day on the wall calendar, but digital and without the thumbtacks..

Manual Installation

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

Validation

Ensure that the date range picker is properly filled out by using the isRequired prop.

Event date

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.

Room Booking Dates

Controlled

Take control of your date range picker by passing a value prop to manage the selected date range.

Tuesday, December 31, 2024 to Sunday, January 12, 2025

2024-12-31 to 2025-01-12

Event date

Disabled

When the date range picker is disabled, it becomes non-interactive and is visually represented in a disabled state.

Event date