Date & time

The native temporal input types — date, time, datetime-local, month, and week — wear the same .re-input surface as every other field. The browser supplies the calendar/clock picker; Relements only polishes the trailing indicator. No JavaScript.

Types

Date Time Date & time Month Week

<div class="stack">
  <label class="re-field">
    <span class="re-field__label">Date</span>
    <input class="re-input" type="date" name="date" value="2026-06-20" />
  </label>
  <label class="re-field">
    <span class="re-field__label">Time</span>
    <input class="re-input" type="time" name="time" value="09:30" />
  </label>
  <label class="re-field">
    <span class="re-field__label">Date &amp; time</span>
    <input class="re-input" type="datetime-local" name="datetime" value="2026-06-20T09:30" />
  </label>
  <label class="re-field">
    <span class="re-field__label">Month</span>
    <input class="re-input" type="month" name="month" value="2026-06" />
  </label>
  <label class="re-field">
    <span class="re-field__label">Week</span>
    <input class="re-input" type="week" name="week" value="2026-W25" />
  </label>
</div>

Constraints

min / max bound the allowed values; an out-of-range entry turns the field red via the native :user-invalid. That red is visual only — name the allowed range in text referenced by aria-describedby so the reason reaches assistive tech.

Appointment date Choose a date in June 2026. An out-of-range date turns the field red — the allowed range is named here so the reason reaches assistive tech.

<div class="stack">
  <label class="re-field">
    <span class="re-field__label">Appointment date</span>
    <input
      class="re-input"
      type="date"
      name="appointment"
      min="2026-06-01"
      max="2026-06-30"
      value="2026-06-20"
      aria-describedby="appointment-hint"
    />
    <span class="re-field__hint" id="appointment-hint">
      Choose a date in June 2026. An out-of-range date turns the field red — the allowed range
      is named here so the reason reaches assistive tech.
    </span>
  </label>
</div>

Accessibility

Picker indicator is Chromium-only — only Blink exposes ::-webkit-calendar-picker-indicator to style, so the polish (cursor, hit area, hover wash) is scoped to it with @supports. WebKit renders no indicator and Firefox draws its own; all three get the full .re-input surface and a working native picker, and the spinner segments stay keyboard-editable everywhere. The indicator is never hidden (display:none / pointer-events:none / opacity:0) — it’s the only pointer affordance for opening the picker.
Constraint reason — min/max give a free visual invalid state, but not a reason. Put the allowed range in an aria-describedby hint (or a .re-validation-message when you escalate to an error) so it’s announced, not just shown in red.
Dark mode — color-scheme lets the UA render the indicator glyph for the active scheme automatically, so it stays visible on dark backgrounds with no recolouring.
Forced colors — the dim + hover wash are dropped under forced colors so the UA glyph keeps full system contrast.

See the accessibility guide for the project-wide approach.