Date Range Picker
A date range picker combines two DateFields and a RangeCalendar popover to allow users to enter or select a date and time range.

Installation

In the terminal, run the following command to begin:
npx hq-kit add date-range-picker

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

Controlled

Saturday, April 26, 2025 to Thursday, May 8, 2025

2025-04-26 to 2025-05-08

Event date

Validation

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