Date Input
FormsA text input field specifically formatted for date entry. Supports various date formats and validation.
Import
import { DateInput } from "@/components/ui/date-input";Usage
Basic Date Input
Type a date in the specified format
Custom Format
Use different date format patterns
With Error
Display validation errors
Please enter a valid date
Disabled
Disabled state
API Reference
valueundefinedDateControlled value of the input
defaultValueundefinedDateDefault date value for uncontrolled usage
onValueChangeundefined(date: Date | undefined) => voidCallback when date value changes
labelundefinedstringLabel text displayed above the input
dateFormat"MM/dd/yyyy"stringDate format string (date-fns format)
placeholder"MM/DD/YYYY"stringPlaceholder text
errorundefinedstringError message to display
disabledfalsebooleanWhether the input is disabled
| 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 |