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

CLI

Manual

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

Preview

Blocks

date-field-01

date-field-02

date-field-03

date-field-04

Tuesday, February 24, 2026

2026-02-24

date-field-05

date-field-06