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";

Usage

Basic Date Picker

Click to open calendar popover

Select a Date

With Date Constraints

Limit selection to a specific range

Event Date

With Error

Display validation errors

Appointment Date

Please select a valid date

Disabled

Disabled state

Date

API Reference

valueundefined

Date

Controlled selected date

defaultValueundefined

Date

Default date for uncontrolled usage

onValueChangeundefined

(date: Date | undefined) => void

Callback when date selection changes

labelundefined

string

Label text displayed above the picker

placeholder"Select date"

string

Placeholder text when no date is selected

dateFormat"PPP"

string

Display format for the selected date

minDateundefined

Date

Minimum selectable date

maxDateundefined

Date

Maximum selectable date

errorundefined

string

Error message to display

disabledfalse

boolean

Whether the picker is disabled

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

Calendar DateRangePicker DateInput

Import

Usage

Basic Date Picker

With Date Constraints

With Error

Disabled

API Reference

Related Components