Date Input

Forms

A text input field specifically formatted for date entry. Supports various date formats and validation.

Import

import { DateInput } from "@/components/ui/date-input";

Type a date in the specified format

Date

Use different date format patterns

Date (ISO Format)

Display validation errors

Birth Date

Please enter a valid date

Disabled state

Date

Prop	Type	Default	Description
`value`	`Date`	undefined	Controlled value of the input
`defaultValue`	`Date`	undefined	Default date value for uncontrolled usage
`onValueChange`	`(date: Date \| undefined) => void`	undefined	Callback when date value changes
`label`	`string`	undefined	Label text displayed above the input
`dateFormat`	`string`	"MM/dd/yyyy"	Date format string (date-fns format)
`placeholder`	`string`	"MM/DD/YYYY"	Placeholder text
`error`	`string`	undefined	Error message to display
`disabled`	`boolean`	false	Whether the input is disabled