Date Picker

new

Field-styled trigger with a floating Calendar; range mode adds a two-month view and quick presets (Last 7 days…).

6 files · 619 locdeps: clsx, tailwind-merge

Due date

Report period

Presets on the left, two months side by side.

Installation

With the shadcn CLI, pointing at this platform’s registry:

npx shadcn@latest add https://opusui.131199999.xyz/r/date-picker.json

Or offline, straight from your opus55 checkout (copies every file it needs):

node ../tailwind_component/opus55/scripts/add.mjs date-picker

Usage

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

<DatePicker value={date} onValueChange={setDate} />
<DatePicker mode="range" value={range} onValueChange={setRange} />

API

Prop	Type	Default	Description
mode	"single" \| "range"	"single"	Selection model.
value / onValueChange	Date \| null \| DateRange	—	Value.
presets	{ label, range: () => DateRange }[]	—	Range shortcuts (defaults provided).
format / locale	Intl.DateTimeFormatOptions / string	—	Trigger label.

← PreviousCalendar Next →Color Picker