Date range

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.

Related

• 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.