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.

Installation

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

Preview

Locales
Calendar
mmddyyyy

Example

Basic Usage

date-field-demo
Event date
mmddyyyy

With Time

date-time-field
Event date
72720261740

Controlled

date-field-controlled

Monday, July 27, 2026

2026-07-27

Event date
7272026

Uncontrolled

date-field-uncontrolled
Event date
7272026

Validation

date-field-validation
Event date
mmddyyyy

Parser

date-parser
Birth date
1101999