HQ UI

Date Picker

A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.

Date FieldDate Range Picker

Installation

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

Preview

Locale
Calendar

Blocks

date-picker-01
Event Date
date-picker-02
Event date
date-picker-03
Event date
date-picker-04
Delivery date
date-picker-05

Friday, April 17, 2026

2026-04-17

Event date
date-picker-06
Event date
Date Field
Date Range Picker