Prototype Library

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

PropTypeDefaultDescription
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

EventTypeDefaultDescription
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/max map to native input bounds, blocking out-of-range selection.
  • Form-associated via ElementInternals — value submits with the enclosing form.