Date picker

Choose a date or a date range without changing the date you typed.

Preview

Usage

The caller owns the label. Values are date-only ISO strings; typed entry stays in DD/MM/YYYY order.

123import { DatePicker } from "@/components/ui/date-picker";

<DatePicker defaultValue="2026-10-09" onValueChange={setDate} />

Anatomy

Examples

Range

Use two calendars when the task needs a start and end date. Hover previews the range before the end date is selected.

Inline

Use the inline display when a booking or planning surface keeps the calendar visible beside its own task controls.

Choose date

October 2026

Reporting comparison

Reporting presets and comparison copy compose the same range owner.

Compare with previous period

2026-10-01–2026-10-31

API

DatePicker properties
Prop	Type	Description
`mode`	`"single" \| "range"`	Chooses one date or a start/end range.
`display`	`"popover" \| "inline"`	Keeps the calendar attached to the trigger or visible in the composition.
`value`	`string \| DatePickerRange \| null`	Controlled date-only ISO value.
`defaultValue`	`string \| DatePickerRange \| null`	Initial uncontrolled value.
`onValueChange`	`(value) => void`	Runs only for valid, selectable dates.
`min / max`	`string`	Inclusive date-only ISO boundaries.
`isDateDisabled`	`(date: string) => boolean`	Disables a date without normalizing it.
`disabled / invalid`	`boolean`	Disables the control or exposes its error state.
`locale`	`string`	Formats calendar labels without shifting the date.

Accessibility

The calendar uses a labelled grid with roving focus. Arrow keys move by day or week; Home and End move within a week; Page Up and Page Down move by month; Shift + Page Up/Down moves by year. Enter or Space selects. Escape closes and returns focus to the calendar trigger.

Installation

Copy date-picker.tsx and date-picker.css with the existing Button, IconButton, Input, InputGroup, and Popover owners. Load the shared tokens and IBM Plex Sans styles.