Date Picker
Date picker with an interactive calendar, time picker, year and month dropdowns, min/max limits, and date-of-birth presets.
import { DatePicker } from "@plexui/ui/components/DatePicker";Examples
Overview
Limits
Date of birth
Time picker
Dropdown + time
Two fields
Date input
DateTime input
Without Icon
Disabled
API
Use aria-labelledby with the ID of a visible field label. The trigger includes that label and its current date or placeholder in its accessible name. aria-label, aria-describedby and aria-invalid also reach the trigger.
In the calendar, the arrow keys move focus by a day or a week, Home and End move it to the Sunday or Saturday of the week, and Page Up and Page Down move it by a month (January 31 goes to the last day of February). A day in another month turns the calendar to that month first. Focus stays put when the day it would move to is outside min and max. Enter and Space select the focused day.
| Prop | Type | Default | Description |
|---|---|---|---|
value | DateTime | null | — | Required. Selected date (luxon) |
onChange | (date: DateTime | null) => void | — | Required. Called when the date changes |
id | string | — | Id of the trigger, for forms and labels |
min | DateTime | — | Earliest selectable date (inclusive) |
max | DateTime | — | Latest selectable date (inclusive). Must not be before min |
captionLayout | "buttons" | "dropdown" | "buttons" | Calendar header mode. Use dropdown for date of birth |
showTime | boolean | false | Show time input below calendar |
yearRange | [number, number] | last 120 years | Min/max years for dropdown caption |
size | ControlSize | "md" | Trigger size (3xs to 3xl) |
variant | "outline" | "soft" | "ghost" | "outline" | Trigger style |
pill | boolean | true | Rounded trigger |
block | boolean | false | Full-width trigger |
clearable | boolean | false | 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 |
triggerClassName | string | — | Class applied to the trigger |
dropdownIconType | "dropdown" | "chevronDown" | "none" | "dropdown" | Icon at the end of the trigger |
placeholder | string | "Select date..." | Trigger placeholder |
disabled | boolean | false | Disable picker |
side | "top" | "right" | "bottom" | "left" | "bottom" | Preferred side of the calendar popover |
sideOffset | number | 8 | Distance from the trigger in pixels |
align | "start" | "center" | "end" | "center" | Alignment against the trigger |
alignOffset | number | 0 (center), -5 (start, end) | Offset from start/end alignment in pixels |
Styling
Date Picker reads these component tokens. Override them at any scope to restyle it:
--input-border-color-invalid: border color invalid (defaultvar(--color-border-danger-outline))--input-outline-border-color: outline border color (defaultvar(--color-border-primary-outline))--input-outline-border-color-hover: outline border color hover (defaultlight-dark(var(--alpha-25), var(--alpha-30)))--input-placeholder-text-color: placeholder text color (defaultvar(--color-text-tertiary))--input-text-color: text color (defaultvar(--color-text))--select-control-font-weight: font weight (defaultvar(--font-weight-normal))