Date Picker

Choose a date from a calendar inside a popover.

View component source ↗

Preview

Example

A minimal example to get started.

Installation

Install this component and its dependencies in a project initialized with shadcn.

pnpm dlx shadcn@latest add https://ui.hyunjoon.net/r/date-picker.json

Usage

This is the basic example. Use the Code tab above for the selected example. Adjust import aliases to match your project.

import { useState } from "react";

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

export default function Example() {
  const [date, setDate] = useState<Date | undefined>(new Date(2026, 8, 20));
  return <DatePicker value={date} onValueChange={setDate} />;
}

API reference

Derived from the installed component types. Native DOM props are also supported where applicable. A dash means no explicit default is documented. Some props depend on the selected mode.

DatePicker

DatePicker properties
Prop	Type	Default	Description
`value`	Date \| undefined Date \| undefined	`—`	The current value when controlled by the application.
`onValueChange`Required	(date: Date \| undefined) => void (date: Date \| undefined) => void	`—`	Called with the updated value; use this to synchronize controlled state.
`placeholder`	string \| undefined string \| undefined	`"Pick a date"`	Hint shown when the control has no value.
`disabled`	boolean \| undefined boolean \| undefined	`—`	Prevents user interaction.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`locale`	Partial<DayPickerLocale> \| undefined Partial<DayPickerLocale> \| undefined	`—`	Locale used for date labels and formatting.

Usage notes

Control the selection with value and onValueChange. Use disabled to prevent changes and locale to localize the calendar.