Date & time

Typed and picked dates, times and ranges sharing one calendar. Every sub-component is React in @acrm/ui and renders the .dp-* engine (apps/web/src/ds/date-picker.css); there is no native <input type="date|time|month|datetime-local"> anywhere in the app (canon since 21 Aug 2026, guarded by tests).

Which sub for which need

Need	Use	Not
One date (task due, meeting date, birth date) — "Termín" is always a single date	Date field (`<DateField>`)	native date input, two fields for start/end
One time of day, or the "od"/"do" end of an event	Time field (`<TimeField>`, `getStart` on the end)	select of 96 options, spinner
From–to span of dates (reports, segment filters)	Date range (`<DateRangeField>`)	two Date fields with a dash
Event start–end with time, all-day, overnight	Date-time range (`<DateTimeRangeField>`)	second date picker for every meeting
Month grid inside a menu, rail or panel	Calendar (`<Calendar>` + `singleDatePresets` / `pastRangePresets`)	own grid, third-party datepicker
Floating layer for a calendar or time list	Picker panel (`<PickerPanel>`)	`.acrm-popover` (360px cap)
Due date with optional time (task dialog)	Calendar in `.dp-pop` + `.dp-addtime` / `.dp-timerow` + Time field	Date-time range

Rules shared by the family (Inputs card, docs/DS-USAGE.md): accent only on focus, selection and one primary action; selected preset = frame, not fill (the selected calendar day is the one exception: full accent tile, like radio); fields flat at rest; width = content (168 / 88 / 236px); sentence case; tokens only, no hard px or hex outside the layout dimensions listed in the engine header.

Date and number conventions

Year only when needed (formatDate): "26. 8." this year, "14. 11. 27" another year of the century, "11. 2. 1988" another century; the precision is derived from today, not from the record type.
Long form "14. července 2026" and month title "srpen 2026" always carry the year.
Never tabular-nums on dates — a date is read as text; the only tabular figure in the family is the day count .count in the range head.
Time h:mm 24-hour without leading zero ("9:30"); duration "45 min" / "1 h" / "1 h 30 min"; days "1 den" / "3 dny" / "7 dní".
Wire format is ISO (YYYY-MM-DD, HH:mm, minutes from midnight in component state) — never formatDate output.

Picker classification

Trigger / surface	Classes	Consumer in code	Status
A — field in a form (32px, `.acrm-input` metrics)	`.dp-field`, `.dp-input`, `.dp-open`	DateField, TimeField, DateRangeField	canon
A2 — range field (236px)	`.dp-field.wide.range`, `.dp-sep`	DateRangeField	canon
B — filter chip trigger (30px, `.fb-chip` metrics)	`.dp-chip`	none — filter bars use `.fb-chip` / `.tchip` from the Filter family	candidate for removal
Panel body	`.dp-pop`, `.dp-pop.range`, `.dp-timelist`	Calendar, TimeField	canon
Panel head (range)	`.dp-entry.pair`	DateRangeField	canon
Overlay	`.dp-panel`, `.dp-scrim`, `.sheet`	PickerPanel	canon
Inline (rail, sheet, no panel)	`.dp-inline`	none — rail and task dialog render `.dp-pop` inside their own menu	candidate for removal
Task due extras	`.dp-addtime`, `.dp-timerow`	TaskDialog	canon, app-specific
Event term	`.dp-stack`, `.dp-termin`, `.dp-timegroup`, `.dp-dur`, `.dp-allday`, `.dp-presets`, `.dp-status`	DateTimeRangeField	canon

Consolidation candidates

.dp-chip and .dp-inline have no consumer in apps/web/src or packages/ui/src; either delete them from the engine or move .dp-chip under Filter chip.
.dp-echo is 400 11.5px literal — should be the --hint token (AD 26 Aug 2026); .dp-day.sel uses #fff instead of --fg-on-accent; .dp-chip carries 7px / 10px literals marked ds-ok.
--fg-muted and --fg-secondary at 11–12px (echo, duration, day count, placeholders, all-day label) sit below AA 4.5:1 in light mode across the family — one decision for all of them, not per sub.
Picker panel has no focus trap on mobile although it sets aria-modal.
docs/DS-USAGE.md "what to use for what" table has no date/time row yet; this page is the reference until it is added.

Legacy

legacy/dates.html is the only legacy card of the family. Still true: the year convention table, the derived forms, "no toLocaleDateString in screens", "no tabular-nums on dates". Superseded: implementation path apps/web/src/i18n/date-core.ts (now packages/ui/src/lib/date-core.ts) and every mention of <input type="date"> — toDateInputValue remains only as the ISO helper for API payloads. There was never a legacy card for the picker itself; the engine is the canon.

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