Date Picker

Forms

A date picker component that combines a trigger button with a calendar popover for easy date selection.

Import

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

Click to open calendar popover

Select a Date

Limit selection to a specific range

Event Date

Display validation errors

Appointment Date

Please select a valid date

Disabled state

Date

Prop	Type	Default	Description
`value`	`Date`	undefined	Controlled selected date
`defaultValue`	`Date`	undefined	Default date for uncontrolled usage
`onValueChange`	`(date: Date \| undefined) => void`	undefined	Callback when date selection changes
`label`	`string`	undefined	Label text displayed above the picker
`placeholder`	`string`	"Select date"	Placeholder text when no date is selected
`dateFormat`	`string`	"PPP"	Display format for the selected date
`minDate`	`Date`	undefined	Minimum selectable date
`maxDate`	`Date`	undefined	Maximum selectable date
`error`	`string`	undefined	Error message to display
`disabled`	`boolean`	false	Whether the picker is disabled