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
5820260806
date-field-03
Event date
mmddyyyy
date-field-04

Friday, May 8, 2026

2026-05-08

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