Masked date input

Date typed straight into a dd.mm.rrrr mask with inline validation; no leading zero required, ISO out only once complete and valid.

Merged to origin/main 15 September 2026 (MR !3540), approved by the product owner as part of the New person dialog work (`.claude/rules/design-system.md` §"Vstupy a mobil", 14 Sep 2026: a structured value is a mask, never free text). Sibling pattern to `MaskedPhoneInput` (input + muted ghost-template) but that component has no card of its own yet in this registry — it is only listed under `record-rail/rail`'s files — so this is the mask pattern's first documented entry, filed under Text field for lack of a dedicated family. Code correction against the design brief: `inputMode` is `"decimal"`, not `"numeric"`. The component's only call site (`NewContactDialog`, the New person dialog) is not merged yet, and it wires no calendar next to the field — "the calendar is a complement" is the rule this component exists to satisfy, not yet an observed behaviour. No stories: lives in `apps/web/src/components/multivalue/`, which `packages/ui` must not import. Registry repaired 17 Oct 2026 (review F1, F10): now exported from @acrm/ui (packages/ui/src/components/MaskedDateInput.tsx, lib/date-mask.ts); the apps/web paths and the "lives in apps/web" caveat are outdated.

Used in 2 files · 2 areas · 3× — components/person, components/relations

Import

import { MaskedDateInput } from '@acrm/ui'

Props

MaskedDateInput packages/ui/src/components/MaskedDateInput.tsx

CSS classes

Files

• packages/ui/src/components/MaskedDateInput.tsx
• packages/ui/src/lib/date-mask.ts
• apps/web/src/ds/dialog-formless.css
• apps/web/src/ds/dialog-formless.css

Related