HQ UI

Date Field

A date field allows users to enter and edit date and time values using a keyboard. Each part of a date value is displayed in an individually editable segment.

CalendarDate Picker

Installation

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

Preview

Locale
Calendar
mmddyyyy

Blocks

date-field-01
Event date
mmddyyyy
date-field-02
Event date
33020261606
date-field-03
Event date
mmddyyyy
date-field-04

Monday, March 30, 2026

2026-03-30

Event date
3302026
date-field-05
Event date
3302026
date-field-06
Birth date
1101999
Calendar
Date Picker