Date Picker

Form-associated date input wrapping the native calendar UI. A Lit Web Component migrated from the Angular esa-date-picker.

Inherited wc import '@esa/ecology/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).
`placeholder`	`string`	`'Select date...'`	Placeholder text.
`min`	`string`	`''`	Earliest selectable date (YYYY-MM-DD).
`max`	`string`	`''`	Latest selectable date (YYYY-MM-DD).
`disabled`	`boolean`	`false`	Disables interaction (reflected attribute).
`name`	`string \| undefined`	—	Form field name — the key this control submits under.
`help-text`	`string`	`''`	Helper text below the input. Property: `helpText`.
`error-text`	`string`	`''`	Error message; sets the error state when present. Property: `errorText`.
`required`	`boolean`	`false`	Marks the field required (renders a * after the label).
`live-error`	`boolean`	`false`	Announce the error the moment it appears rather than only when the field is focused. OFF by default — see the long note on `esa-text-field.liveError`: the house pattern is validate-on-submit with `<esa-error-summary>`, under which a live region per field fires an assertive announcement for EVERY invalid field at once, racing the summary the user was just sent to. Turn it on for fields validated INLINE, on blur. Property: `liveError`.
`value`	`string`	`''`	ISO date value (YYYY-MM-DD).

Events

Event	Type	Default	Description
`change`	`CustomEvent<{ value: string }>`	—	Fired on input. Value is an ISO YYYY-MM-DD string. Composed and bubbles.

Binding these events from Angular

Every one of these is a CustomEvent, so the payload is on $event.detail — $event.target.value reads empty, with no error. The names are lowercase and Angular passes them to addEventListener verbatim, so camel-casing one means it never fires.

(change)="onChange($event.detail)"

Date Picker

Preview

Sizes

States

API

Events

Accessibility