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

Date range

canon

Paired inputs for a from–to date span with presets.

Used in 4 files · 3 areas · 5× — components/clen-tymu, components/segment, pages/DovolenePage

@acrm/ui <DateRangeField>.dp-field .dp-entry .dp-sep .dp-presets +1SourceStoryLegacy card dates.html
ExamplesCodeUsageAccessibilityChangelog

One field with two writable ends for a from–to span. React <DateRangeField> (packages/ui/src/components/DateRangeField.tsx) emits .dp-field.wide.range with two .dp-input ends, .dp-sep and .dp-open, and opens a two-month Calendar with pastRangePresets in a Picker panel. It replaces the pair of native <input type="date"> in filters and reports.

When to use

  • Report and list filters: "Období", interaction filter of a segment, KPI drill-down.
  • Any span where both ends are dates and time does not matter.
  • Open-ended spans: only "od" or only "do" filled (typical for presets like "od 1. 8.").

When not to use

  • Event start and end with time — use Date-time range.
  • A single deadline — use Date field ("Termín" is one date).
  • Spans that live in a filter chip menu: the chip hosts a Calendar (mode="range", one month) itself; this field is for forms and filter bars with an input.

Anatomy

  • Field .dp-field.wide.range: 236×32px; ends are centred .dp-input with placeholders "od" / "do"; separator .dp-sep "–" in --fg-muted; trigger .dp-open.
  • Panel body: .dp-pop.range 540px with head .dp-entry.pair (calendar icon, read-only "od" – "do" echo, .count day count in --overline tabular), presets .dp-presets, .dp-rule, two months, .dp-foot "Vymazat" once either end is set.
  • Presets default pastRangePresets: Posledních 7 dní · Tento týden · Tento měsíc · Minulý měsíc · Letos; .dp-preset.on = accent frame, no fill.
  • Ordering: if "od" is after "do" the ends are swapped — the value is never invalid.
  • States: focus-within ring, .err (error prop), .disabled.
  • Value contract { from, to }, both ISO or null; fromLabel / toLabel name the ends for assistive tech (default "Od" / "Do").

Best practices

Do
  • Use the default presets for reporting; pass custom presets only when the screen has its own periods.
  • Keep futureBias off for filters into the past (default).
  • Wrap in <Field label="Období">; keep the 236px width — it fits "14. 11. 27 – 14. 11. 27".
Don’t
  • Two separate Date fields with a dash between them.
  • A preset row outside the panel duplicating the panel presets.
  • Custom "Reset" buttons — "Vymazat" in the panel foot clears the range.

Content

  • Ends formatted by formatDate (year only when needed); day count by fmtDays ("1 den", "3 dny", "7 dní").
  • Placeholders lower-case "od" / "do"; the field label carries the noun ("Období").
  • Preset labels sentence case, as in code; do not invent "Q1"-style labels without a preset.
  • calendar — range mode, presets.
  • date-field — the single-date sibling.
  • filter-chip (Filter family) — chip-hosted range for filter bars.
  • picker-panel — the 540px floating layer.

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