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
CLI
Manual
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.
Preview
Code
Event date
mmddyyyy
mmddyyyy
Controlled
Preview
Code
Saturday, April 26, 2025 to Thursday, May 8, 2025
2025-04-26 to 2025-05-08
Event date
4262025
582025
Validation
Preview
Code
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.
Preview
Code