Accessible calendar date picker (lta-date-picker). Listen forduetChange or lta-date-change to receivevalue and valueAsDate in event.detail. Set min, max, and value as ISO dates (YYYY-MM-DD). Use mode="range" for start/end selection in one calendar (value as YYYY-MM-DD to YYYY-MM-DD). Edit markup and click Apply.

Basic

Default picker with label and placeholder.

Live preview

Markup (editable)

With value

Pre-selected date via the value attribute.

Live preview

Markup (editable)

Min / max dates

Restrict selectable dates with min and max.

Live preview

Markup (editable)

Date range

Single calendar range selection with mode="range". Pick start, then end.

Live preview

Markup (editable)

Error state

Forced error via has-error="true". Selecting a date in the preview clears it (re-Apply to restore).

Live preview

Markup (editable)

Required

Marks the field as required for forms.

Live preview

Markup (editable)

Disabled

Non-interactive picker with a fixed value.

Live preview

Markup (editable)

Without icons

Hides calendar / clear icons with show-icons="false".

Live preview

Markup (editable)

Custom display format

Visible format via display-format (stored value stays ISO).

Live preview

Markup (editable)