Diwa Design System

Input Week

A week-and-year picker input (YYYY-Www). Delegates to the native browser week picker. Supports min and max week constraints.

Default

Week picker (YYYY-Www) delegating to the native browser week picker UI.

<diwa-input-week label="Sprint week"></diwa-input-week>

With week range constraint

Use min / max (YYYY-Www) to restrict the allowed range.

<diwa-input-week label="Report week" min="2026-W01" max="2026-W52" description="Select a week in 2026."></diwa-input-week>

Error state

<diwa-input-week label="Sprint week" value="2020-W01" state="error" message="Please select a current or future week."></diwa-input-week>

Compact

<diwa-input-week label="Week" compact></diwa-input-week>

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-week label="Sprint week">
  <diwa-icon slot="start" name="calendar" size="16"></diwa-icon>
  <diwa-icon slot="label-after" name="info" size="16"></diwa-icon>
</diwa-input-week>