Date Picker

A date picker combining Calendar with a Radix Popover trigger showing the formatted date.

Default

Disabled

Custom Format

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

Prop	Type	Default	Description
`value`	`Date`	—	The selected date.
`onChange`	`(date: Date \| undefined) => void`	—	Callback when the date changes.
`placeholder`	`string`	`'Pick a date'`	Text shown when no date is selected.
`dateFormat`	`string`	`'PPP'`	Date format string (date-fns format).
`disabled`	`boolean`	`false`	Disables the date picker.

Sub-components

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

Component	Element	Purpose
`DatePicker`	`<button>` (trigger)	Trigger button displaying the selected date or placeholder
DatePicker.Content	`<div>` (portal)	Popover panel containing the calendar
`Calendar`	`<div>`	Month-view calendar for date selection (installed separately)

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

Date Picker

On this page