Input Date

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

When to use

Use diwa-input-date when the user must pick a specific calendar date. The component delegates to the browser's native date picker, providing a consistent and accessible experience without a custom calendar overlay.

Example

<!-- Basic -->
<diwa-input-date
  label="Appointment"
  required
></diwa-input-date>

<!-- Constrained range -->
<diwa-input-date
  label="Travel date"
  min="2025-01-01"
  max="2025-12-31"
></diwa-input-date>

Value format

Values are always in ISO 8601 format: YYYY-MM-DD (e.g. 2025-06-15). Both the value prop and the emitted change event payload use this format. Parse with new Date(value) or a date library - note that the string without a time zone is treated as UTC midnight by Date().

min / max

Provide min and max as YYYY-MM-DD strings to constrain the picker. Dates outside the range appear greyed-out and cannot be selected.

Browser compatibility

All modern browsers (Chrome, Edge, Firefox, Safari 14.1+) support <input type="date">. For Safari versions below 14.1 a text fallback is shown; validate the format server-side in those cases.

Dos and don'ts

✓Always provide a visible label - screen readers rely on it.
✓Use min and max to constrain the selectable range to valid dates for your use case.
✓Use the description prop to clarify the expected date format, especially for Safari fallback.
✓Set required when the field must be filled before form submission.

Don't

✕Don't rely on the browser's built-in date picker as the only validation - always validate server-side.
✕Don't pass a non-ISO date string as value - use YYYY-MM-DD format only.
✕Don't use this component to pick a time - use diwa-input-time instead.
✕Don't use very distant min/max ranges without a placeholder hint for the expected era.