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

Monday, March 2, 2026

2026-03-02

date-picker-06