Date Picker
Select a single date with an interactive calendar
import { DatePicker } from "@plexui/ui/components/DatePicker";Examples
Overview
Select date...
Limits
04/11/26
Date of birth
Select your birthday
Time picker
Select date & time
Dropdown + time
Schedule event
Two fields
Select date
Date input
DateTime input
Without Icon
Choose a date
Disabled
04/11/26
Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | DateTime | null | — | Selected date (luxon) |
onChange | (date: DateTime | null) => void | — | Called when date changes |
min | DateTime | — | Minimum selectable date |
max | DateTime | — | Maximum selectable date |
captionLayout | "buttons" | "dropdown" | "buttons" | Calendar header mode. Use dropdown for date of birth |
showTime | boolean | false | Show time input below calendar |
yearRange | [number, number] | — | Min/max years for dropdown caption |
size | string | — | Trigger size |
pill | boolean | — | Rounded trigger |
clearable | boolean | — | Show clear button |
triggerShowIcon | boolean | true | Show calendar icon |
triggerDateFormat | string | "MM/dd/yy" | Date format in trigger. Auto-includes time when showTime is enabled |
placeholder | string | — | Trigger placeholder |
disabled | boolean | — | Disable picker |