Date Picker

A button that opens a Calendar in a Popover to pick a date or a date range.

Due date

When to use

Use when: A form field for a date or a date range that should stay compact until opened.
Avoid when: The calendar should always be visible; use Calendar.

Installation

bunx shelf add date-picker

The source lands in src/components/ui/date-picker.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

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

<DatePicker value={date} onValueChange={setDate} />

Examples

Range

Pick a start and an end date.

Trip dates

Disabled

Start date

Built on

Packages: @stylexjs/stylex, react-day-picker
Shelf items: Button, Calendar, foundations, Icons, Popover
Figma: In progress. See Designers and Figma.