Input Date

A date picker input (YYYY-MM-DD). Delegates to the native browser date picker. Supports min and max date constraints.

Default

Date picker delegating to the native browser date picker UI.

<diwa-input-date label="Date of birth"></diwa-input-date>

With date range constraint

Use min / max (YYYY-MM-DD) to restrict the date range.

<diwa-input-date label="Booking date" min="2026-01-01" max="2026-12-31" description="Choose a date in 2026."></diwa-input-date>

Error state

<diwa-input-date label="Departure date" value="2020-01-01" state="error" message="Date must be in the future."></diwa-input-date>

Compact

<diwa-input-date label="Date" compact></diwa-input-date>

Slots

Use start to embed an icon inside the input border, and label-after to place contextual icons or links after the label.

<diwa-input-date label="Appointment">
  <diwa-icon slot="start" name="calendar" size="16"></diwa-icon>
  <diwa-icon slot="label-after" name="info" size="16"></diwa-icon>
</diwa-input-date>