Date Picker

A calendar popover for choosing a single date.

Overview

Date Picker composes Button, Popover, and Calendar into one field. Selecting a day closes the popover and updates the trigger label.

Run vinyaas add date-picker to install Calendar and Popover dependencies together.

Preview

Installation

Add the component with the CLI. It copies the files in and installs anything they depend on.

npx vinyaas add date-picker

Usage

1
2
3
4
5
6
7
8
9
10
11
import { DatePicker } from "@/components/ui/date-picker";

export function DueDateField() {
  return (
    <DatePicker
      className="w-full max-w-sm"
      placeholder="Pick a date"
      aria-label="Due date"
    />
  );
}

Examples

Basic

Outline button opens a single-date calendar popover.

Controlled

Drive the value from React state for forms and resets.

Disabled

A fixed date with interaction turned off.

With label

Pair Label and id for deadline fields with future-only dates.

Project deadline

In practice

Choose a deployment date with weekday-only matchers and a long formatted label.

API

Other attributes for the underlying element are passed through.

Name	Type	Default	Description
`value`	Date	—	Controlled selected date. Use with onValueChange.
`defaultValue`	Date	—	Initial date for an uncontrolled DatePicker.
`onValueChange`	(date: Date \| undefined) => void	—	Called when the user selects or clears a date.
`placeholder`	string	`"Pick a date"`	Trigger label when no date is selected.
`formatString`	string	`"PPP"`	date-fns format for the trigger when a date is selected.
`disabled`	boolean	—	Disables the trigger and prevents opening the popover.
`disabledDates`	Matcher \| Matcher[]	—	Forwarded to Calendar disabled — unavailable days in the grid.
`open / defaultOpen / onOpenChange`	boolean	—	Control when the calendar popover is open.
`id / className / aria-label`	string	—	Passed to the trigger button for forms and accessibility.

Accessibility

The trigger is a button with an accessible name from aria-label or the formatted selection. When empty, the placeholder becomes the name unless you override it.

Focus moves into the calendar when the popover opens. Escape closes the popover and returns focus to the trigger. Link visible labels with htmlFor and id.