Date picker
Form-associated date input wrapping the native calendar UI. A Lit Web Component migrated from the Angular esa-date-picker.
Preview
<esa-date-picker label="Event date" help-text="Pick any day"></esa-date-picker>Sizes
<esa-date-picker label="Extra small" size="xs"></esa-date-picker>
<esa-date-picker label="Small" size="sm"></esa-date-picker>
<esa-date-picker label="Medium" size="md"></esa-date-picker>
<esa-date-picker label="Large" size="lg"></esa-date-picker>States
Constrain selectable days with min/max. Preset, required, error, and disabled states are attribute-driven.
<esa-date-picker label="Within 2026" min="2026-01-01" max="2026-12-31"></esa-date-picker>
<esa-date-picker label="Preset value" value="2026-06-03"></esa-date-picker>
<esa-date-picker label="Required" required></esa-date-picker>
<esa-date-picker label="Error" error-text="Date is required"></esa-date-picker>
<esa-date-picker label="Disabled" disabled value="2026-06-03"></esa-date-picker>API
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | '' | Field label above the input. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Control size (reflected attribute). |
value | string | '' | ISO date value (YYYY-MM-DD). |
min | string | '' | Earliest selectable date (YYYY-MM-DD). |
max | string | '' | Latest selectable date (YYYY-MM-DD). |
placeholder | string | 'Select date...' | Placeholder text. |
help-text | string | '' | Helper text below the input. |
error-text | string | '' | Error message; sets the error state when present. |
required | boolean | false | Marks the field required (renders a * after the label). |
disabled | boolean | false | Disables interaction (reflected attribute). |
Events
| Event | Type | Default | Description |
|---|---|---|---|
change | CustomEvent<{ value: string }> | — | Fired on input. Value is an ISO YYYY-MM-DD string. Composed and bubbles. |
Accessibility
- Renders a native
<input type="date">— the browser supplies the calendar and full keyboard handling. - The input is labelled via
aria-label(falls back to "Date" when no label is set). min/maxmap to native input bounds, blocking out-of-range selection.- Form-associated via
ElementInternals— value submits with the enclosing form.
Tokens
--color-background-field·--form-text-color·--form-border-color/--form-border-color-focus/--form-error-border-color- Sizing reads
--spacing-*directly (the--form-height/padding/radius/font-size-*hooks were removed upstream, 2026-08) --color-background-brand(focus) ·--color-background-utility-danger·--focus-ring-color