Components › Forms & input › Date & time › Date-time range

Date-time range

canon

Start and end with time, all-day toggle and duration presets.

M4c (owner 28 Sep 2026, approved): all-day renders the canonical DateRangeField (from–to in one field, shared calendar, day count) instead of two DateFields with their own day arithmetic — one shape for a range of days; `.dp-field.range` ends share the field width (width 0 + flex 1), so the term row no longer overflows on 390 px (acrm branch feat/celodenni-rozsah). acrm !4087 (28 Sep 2026, owner): the visible duration next to times uses `fmtDurShort` — „45 m“ · „1 h“ · „1 h 30 m“ (in the context of time „m“ = minutes). Screen readers keep the full „min“ via `fmtDur` (TimeField option aria-label, DateTimeRange hidden live text) so „m“ is not read as metres. Other durations in the app (timeline, Setkání, tasks, reminders) keep „min“.

Used in 3 files · 3 areas · 3× — components/calendar, components/meetings, pages/ZasedackyPage

@acrm/ui <DateTimeRangeField>.dp-stack .dp-termin .dp-timegroup .dp-switches +3SourceStoryLegacy card dates.html
ExamplesCodeUsageAccessibilityChangelog

Keyboard

  • Tab order: date input → calendar trigger → "od" → "do" → all-day checkbox → duration presets; in all-day mode the Date range field (start → end → one calendar trigger) → the "Celý den" switch.
  • Each part keeps its own keys: ↓ opens the calendar or the time list, Enter commits, Esc closes the open panel.
  • Space toggles "Celý den"; presets are native buttons (Enter/Space).

ARIA

  • Date parts: aria-label="Datum" / "Datum konce"; time parts "Od" / "Do" (listbox options carry the duration text).
  • All-day: canonical Switch (role="switch", aria-checked), accessible name "Celý den". The range field ends are "Datum" / "Datum konce"; the shared calendar is a dialog "Vybrat rozsah" (on phone a bottom sheet with a title and Hotovo).
  • Visually hidden aria-live="polite" region announces "od až do, délka[, přes půlnoc]" after each change.
  • .dp-status is plain text; the × icon is decorative SVG.

Focus

  • Inherited rings from Date field, Time field and the foundation focus-visible rule for the checkbox and preset buttons (.dp-preset:focus-visible 2px --accent, offset 1px).
  • Focus never jumps between parts automatically; the user moves it.

Contrast

  • Duration .dp-dur --fg-secondary on --surface-100: 3.93:1 light, 6.2:1 dark — below AA 4.5 in light (12px 500).
  • Overnight note --warning-ink: 5.58:1 light, 7.96:1 dark.
  • Status ok --positive-ink: 5.33:1 light, 7.55:1 dark; busy --critical-ink: 5.37:1 light, 5.8:1 dark.
  • Preset label --ink-700 on --surface-75: 12.55:1 light, 11.29:1 dark; .on --accent-ink: 5.31:1 light.
  • All-day label --fg-secondary: 3.93:1 light — below AA.

Known limits

  • Duration and "Celý den" label are below AA 4.5:1 in light mode (--fg-secondary at 12px).
  • The live region is the only announcement of the computed end day; the visual .dp-dur is not linked with aria-describedby.
  • The status line is not role="status"; a change of availability is not announced.
  • Native checkbox styling relies on accent-color; older engines show the platform checkbox.

Source: docs/date-time/date-time-range.a11y.md · GitLab