Components

Date picker

Popover + Calendar behind a field trigger, formatted with date-fns. Ships DatePicker (single), DateRangePicker (a from–to range across two months), and TimePicker (a native time field). All share the same h-9 field: border-input, no shadow, focus ring-[3px] ring/50.

Updated Jul 21, 2026 by Juan Pablo Turina

Anatomy

1
Field trigger
A Select-style field (h-9, border-input, rounded-md, no shadow) with a leading CalendarBlank (or Clock) and the formatted value or a muted placeholder.
2
Popover + Calendar
Clicking opens a Popover holding the Calendar. Range shows two months; picking a single date closes the popover.
3
Icon variants
DatePicker icon='left' (CalendarBlank) or 'right' (a CaretDown, select-style).
4
Value formatting
date-fns: single 'PPP' (Jul 21, 2026), range 'MMM d – MMM d, yyyy'. Pass value from state — the picker is controlled.
5
Time field
TimePicker is a native time input styled as the field, with a Clock icon — an HH:mm value.

Variants

Single date

Icon left

Icon right

<DatePicker value={date} onChange={setDate} />
<DatePicker value={date} onChange={setDate} icon="right" />

Date range

<DateRangePicker value={range} onChange={setRange} />

Time

<TimePicker value={time} onChange={setTime} />

Import

Copy this import line at the top of the file where you compose this atom.

A composition of Popover + Calendar (date-fns for formatting). TimePicker is a native time input styled as the field.

import {
  DatePicker,
  DateRangePicker,
  TimePicker,
} from "@/components/ui/date-picker";

Props

Everything else from the underlying HTML or Radix primitive is forwarded via ...props.

Prop	Type	Default	Description
DatePicker.value / onChange	Date \| undefined	—	Controlled selected date. onChange fires on select (and clears on re-select).
DatePicker.icon	'left' \| 'right'	'left'	CalendarBlank on the left, or a CaretDown on the right (select-style).
DateRangePicker.value / onChange	DateRange	—	{ from, to } from react-day-picker. Calendar shows two months.
TimePicker.value / onChange	string (HH:mm)	—	24h time string from a native <input type="time">.
placeholder	string	—	Field text when nothing is selected. Defaults per picker (Pick a date / range).
disabled	boolean	false	Dims the field and blocks opening.
className / id	string	—	Extra classes on the field (set the width here) / associate an external Label.

When to use

Any form field where the user picks a date.
Filter-row date or range selectors.
A time field paired with a date.

When not to use

Very rich schedulers — pull in a dedicated library.
Free-typing dates when the Calendar covers it.

Usage

Use the placeholder to say what kind of date you expect.
Set the value from state; the picker is controlled.
Pair DatePicker + TimePicker for date-and-time.

Don't

Don't ask the user to type dates when the Calendar covers it.
Don't put a drop shadow on the field — no-shadow-on-inputs rule.

Cross-links to atoms and patterns you may reach for next.

CalendarThe month grid inside the popover.
PopoverThe floating surface the calendar sits in.
InputFor a free-typed value instead of a picker.