Date Picker

Basic

A production-ready date picker built by composing Popover + Calendar + Input. Supports single date and range selection, locale formatting, disabled dates, and animated popover transitions.

<DatePicker placeholder="Pick a date" />

Installation

Install the component via the CLI in one command.

npx @work-rjkashyap/unified-ui add date-picker

pnpm dlx @work-rjkashyap/unified-ui add date-picker

npx @work-rjkashyap/unified-ui add date-picker

bunx @work-rjkashyap/unified-ui add date-picker

Or install the full package

Use this approach if you prefer to install the entire design system as a dependency instead of copying individual components.

npm install @work-rjkashyap/unified-ui

pnpm add @work-rjkashyap/unified-ui

yarn add @work-rjkashyap/unified-ui

bun add @work-rjkashyap/unified-ui

Anatomy

import { DatePicker } from "@work-rjkashyap/unified-ui";

Basic Usage

Drop DatePicker anywhere you need a date input. It manages its own internal state by default (uncontrolled) and opens a calendar popover on click.

<DatePicker onSelect={(date) => console.log(date)} />

Single Date Selection

The default mode selects a single date. The popover closes automatically after selection.

const [date, setDate] = useState<Date | null>(null);

<DatePicker
  value={date}
  onSelect={setDate}
  placeholder="Select a date"
/>;

Range Selection

Set mode="range" to allow selecting a start and end date. Click once for the start, then again for the end.

const [range, setRange] = useState<DateRange | null>(null);

<DatePicker
  mode="range"
  valueRange={range}
  onSelectRange={setRange}
  placeholder="Select date range"
/>;

Sizes

<DatePicker placeholder="Small" size="sm" /><DatePicker placeholder="Medium (default)" size="md" /><DatePicker placeholder="Large" size="lg" />

Disabled Dates

Use the disabledDate function to disable specific dates, or pass minDate / maxDate to restrict the selectable range.

// Disable past dates
<DatePicker
  disabledDate={(date) => date < new Date()}
  placeholder="Future dates only"
/>

// Restrict to a date range
<DatePicker
  minDate={new Date(2025, 0, 1)}
  maxDate={new Date(2025, 11, 31)}
  placeholder="2025 only"
/>

Clearable

By default, a clear button (×) appears when a date is selected. Set clearable={false} to disable it.

<DatePicker placeholder="With clear (default)" /><DatePicker placeholder="Without clear" clearable={false} />

Locale Formatting

Dates are formatted using the browser's toLocaleDateString. Pass a locale string to control the output format.

<DatePicker locale="en-US" placeholder="MM/DD/YYYY" />
<DatePicker locale="en-GB" placeholder="DD/MM/YYYY" />
<DatePicker locale="de-DE" placeholder="TT.MM.JJJJ" />

Default Month

Set the initially displayed month in the calendar without controlling it:

<DatePicker defaultMonth={new Date(2025, 11)} placeholder="December 2025" />

Popover Alignment

Control where the calendar popover appears relative to the trigger:

<DatePicker align="start" placeholder="Align start (default)" />
<DatePicker align="center" placeholder="Align center" />
<DatePicker align="end" placeholder="Align end" />

Disabled State

<DatePicker placeholder="Disabled" disabled />

In a Form

A common pattern is wrapping DatePicker in a FormField for label, description, and error handling:

<FormField label="Start Date" description="When should the campaign begin?">
  <DatePicker
    value={startDate}
    onSelect={setStartDate}
    placeholder="Pick a date"
    minDate={new Date()}
  />
</FormField>

Controlled

Use value and onSelect for single mode, or valueRange and onSelectRange for range mode.

// Single
const [date, setDate] = useState<Date | null>(null);

<DatePicker
  value={date}
  onSelect={setDate}
  placeholder="Pick a date"
/>;

// Range
const [range, setRange] = useState<DateRange | null>(null);

<DatePicker
  mode="range"
  valueRange={range}
  onSelectRange={setRange}
  placeholder="Select range"
/>;

Props

Motion

• Popover open/close — Uses the scaleIn preset (scale + opacity) via AnimatePresence for smooth enter/exit transitions.
• The calendar inside the popover uses its own month-transition animation (directional slide).
• All animations respect prefers-reduced-motion via useReducedMotion().

Keyboard Navigation

Accessibility

• The trigger renders a <button> with aria-expanded and aria-haspopup="dialog".
• The popover uses role="dialog" semantics.
• The clear button has aria-label="Clear date" and is keyboard accessible.
• The underlying Calendar provides full ARIA grid semantics, aria-label on each day, and aria-selected on selected dates.
• Disabled state is forwarded to the trigger button.
• Focus is managed between trigger and calendar popover.

Design Tokens