Date Input
Masked text input for typing dates with automatic formatting and validation
import { DateInput } from "@plexui/ui/components/DateInput";Examples
Overview
variant
size
With time
With seconds
Limits
US format
ISO format
With Field
Enter your date of birth
Validation
Date is required
Disabled
Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | DateTime | null | — | Selected date (Luxon DateTime) |
onChange | (date: DateTime | null) => void | — | Called when a complete valid date is entered or the field is cleared |
mode | MaskitoDateMode | "dd/mm/yyyy" | Date format mode: dd/mm/yyyy, mm/dd/yyyy, yyyy/mm/dd, etc. |
separator | string | "." | Character between date parts |
timeMode | MaskitoTimeMode | — | Enable time input: HH:MM, HH:MM:SS, etc. |
dateTimeSeparator | string | ", " | Separator between date and time parts |
timeStep | number | 0 | Arrow-key increment step for time (ms) |
min | DateTime | — | Earliest allowed date |
max | DateTime | — | Latest allowed date |
clearable | boolean | false | Show clear button when input has a value |
size | ControlSize | "md" | Input size (3xs–3xl) |
variant | "outline" | "soft" | "outline" | Visual style |
disabled | boolean | false | Disable input |
invalid | boolean | false | Mark as invalid |
placeholder | string | — | Auto-generated from format if not set |