DatePicker
Calendar dropdown for date selection. Berkeley Mono for values (data font). Locale-aware via date-fns. Three variants: DatePicker, DateTimePicker, DateRangePicker.
DatePicker
PLACEHOLDER
FILLED
WITH HELP TEXT
Next inspection must be within 90 days.
ERROR
Date is required for scheduled maintenance.
DISABLED
READ-ONLY
WITH CONSTRAINTS
Only future dates allowed.
PORTUGUESE LOCALE
DateTimePicker
Date + time selection. Composes DatePicker with a time input. Time steps configurable via minuteStep prop.
FILLED
PLACEHOLDER
DISABLED
ERROR Deadline must be in the future.
DateRangePicker
Start/end date pair for filters and ranges. Start constrains end and vice versa.
WITH VALUES
PERIOD
PLACEHOLDER
FILTER BY DATE
DISABLED
FISCAL YEAR
ERROR
REPORTING PERIOD Both dates are required.
TOKEN REFERENCE
DatePicker use component tokens from components.css:
--datepicker-calendar-padding: var(--space-sm)--datepicker-nav-font: var(--type-label-font) (Berkeley Mono)--datepicker-day-size: var(--button-md-height)--datepicker-day-font: var(--type-data-font) (Berkeley Mono)--datepicker-day-selected-bg: var(--color-accent)--datepicker-day-today-border: var(--border-width) solid var(--color-border-strong)--datepicker-day-outside-opacity: 0.3--datepicker-icon-size: var(--icon-size-sm)--datepicker-placeholder-color: var(--input-placeholder)