Date Picker

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

Installation

CLI

Manual

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

Preview

Blocks

date-picker-01

date-picker-02

date-picker-03

date-picker-04

date-picker-05

Friday, January 23, 2026

2026-01-23

date-picker-06