HQ UI

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.

Date PickerRange Calendar

Installation

npx shadcn@latest add https://hq-ui.vercel.app/r/date-field

Preview

Locale
Calendar

Blocks

date-range-picker-01
Event Date
date-range-picker-02
Event date
date-range-picker-03
Event date
date-range-picker-04
Delivery date
Date Picker
Range Calendar