Date Picker

Default

Disabled

Custom Format

Selected month and alignment

The calendar opens on the month of value, so a date in November opens on November whatever the device's month is. align, sideOffset and collisionPadding position the popover; the defaults ("start", 4, 0) are unchanged. Use align="end" under a full-width trigger on a phone so the calendar does not sit against the right edge.

<DatePicker value={date} onChange={setDate} align="end" collisionPadding={16} />

Installation

npx visor add date-picker

This copies two files into your project:

• components/ui/date-picker/date-picker.tsx — the component
• components/ui/date-picker/date-picker.module.css — the styles

Note: Date Picker depends on the Calendar component. Install it too:

npx visor add calendar

Usage

import { DatePicker } from '@/components/ui/date-picker/date-picker';
import { useState } from 'react';

export default function Example() {
  const [date, setDate] = useState<Date>();

  return (
    <DatePicker
      value={date}
      onChange={setDate}
      placeholder="Pick a date"
    />
  );
}

API Reference

Sub-components

DatePicker exports a single component that internally composes a Radix Popover and the Calendar component:

Accessibility

• The trigger button has descriptive text showing either the selected date or placeholder
• When no date is selected, a <CalendarIcon> provides visual context alongside the placeholder
• The popover calendar inherits full keyboard navigation from the Calendar component
• Focus is trapped in the calendar popover when open; Escape closes it and returns focus to the trigger
• Pair with a <Label> and matching htmlFor/id in a form context for proper labeling