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.

When to use

Use diwa-input-week when the user must select a specific ISO week — common in sprint planning, production scheduling, and weekly reporting dashboards.

Example

<!-- Basic -->
<diwa-input-week
  label="Sprint week"
  required
></diwa-input-week>

<!-- Constrained to H1 2025 -->
<diwa-input-week
  label="Delivery week"
  min="2025-W01"
  max="2025-W26"
></diwa-input-week>

Value format

Values use the ISO 8601 week format YYYY-Www (e.g. 2025-W24). Both the value prop and the emitted change payload follow this format. Week 1 is the week containing the first Thursday of the year.

min / max

Supply min and max as YYYY-Www strings to constrain the picker. For example, to allow only the first half of 2025 use min="2025-W01" and max="2025-W26".

Browser support

<input type="week"> is supported in Chrome and Edge. Firefox and Safari render a text fallback. Always validate the format server-side and communicate the expected format in the description prop when Safari support is required.