Date Picker

A date picker composed from Popover and Calendar. Supports single dates, ranges, dropdown month/year selection, manual text entry, and natural-language parsing.

Composed fromPopover · Calendar · Button · Field · InputGroup · TimePickerInput · ScrollArea

Calendar modesingle · range

Formattingnative Intl / toLocaleDateString

Playground

Show icon— showIcon

Caption layout— captionLayout

Basic

chevron trigger — placeholder until a date is picked

With calendar icon

leading icon + formatted date

Simple — inside a field

labeled field wrapping the trigger

Range picker

two months, from — to

Date of birth

dropdown month/year — closes on selection

Manual entry — input field

type a date, or open the calendar — kept in sync

Date & time

calendar + native time field

Date & time — segmented input

Hours / Minutes / Seconds fields in the calendar footer — type a digit or use Arrow Up/Down, Arrow Left/Right moves focus

Date & time — 12-hour scroll picker

Hour / Minute / AM-PM scrollable columns beside the calendar

Natural language

parses free text like "tomorrow" or "next Friday"

RTL support

Arabic

Tokens used

13 semantic tokens consumed by this component.

--popoverPopover

bg-popover

--popover-foregroundPopover Foreground

text-popover-foreground

--backgroundBackground

bg-background

--foregroundForeground

text-foreground

--primaryPrimary

bg-primarytext-primaryborder-primaryring-primary

--primary-foregroundPrimary Foreground

text-primary-foregroundbg-primary-foreground

--mutedMuted

bg-mutedtext-mutedborder-muted

--muted-foregroundMuted Foreground

text-muted-foreground

--accentAccent

bg-accenttext-accentborder-accent

--accent-foregroundAccent Foreground

text-accent-foreground

--borderBorder

border-borderborder

--inputInput

bg-inputborder-input

--ringRing

ring-ringring