Introducerea datei

Prezentare

Colectează o dată calendaristică fie ca trei câmpuri numerice separate (zi, lună, an), fie prin selectorul nativ al browserului.

Când se folosește

• pentru date introduse manual, unde formatul ambiguu (zi/lună vs. lună/zi) creează risc real de eroare — trei câmpuri separate elimină ambiguitatea.

Când nu se folosește

• pentru date apropiate, unde alegerea dintr-un calendar vizual e mai rapidă decât tastarea — `<input type="date">` simplu, fără despărțire pe componente, poate fi suficient.

Anatomie

Un `<div class="sd-date-input" role="group" aria-label="…">` cu câte un `.sd-date-input__part` per componentă (zi, lună, an), fiecare cu `<label>` propriu și `<input inputmode="numeric">`; alternativ, `.sd-date-picker` încadrează direct un `<input type="date">` nativ.

Variante

• implicit — trei câmpuri text (zi/lună/an)
• `.sd-date-picker` — un singur `<input type="date">` nativ, cu selector de calendar al browserului

Comportament

Complet static, fără JavaScript — nu există enhancement asociat în `interactive.ts`. Validarea (dată validă, în intervalul acceptat) rămâne responsabilitatea aplicației, la trimiterea formularului, afișată prin `error-message`/`error-summary`.

Reguli de conținut

• ordinea și eticheta câmpurilor (Zi, Lună, An) rămân fixe — nu inversa ordinea în funcție de context, utilizatorii se bazează pe ea pentru a evita erori de introducere.

Responsabilitățile implementatorului

• validează combinația zi/lună/an server-side (de exemplu 31 februarie) — componenta nu previne introducerea unei date inexistente.

Cercetare

• https://github.com/ciprian-rus/sistem.digital/pull/52 (site extern)

Istoric

Structura completă a acestei secțiuni urmează șablonul canonic al paginii unei componente. Accesibilitatea (semantică, tastatură, focus) rămâne documentată separat, conform șablonului de accesibilitate.

Preview și markup canonic

Previzualizarea de mai jos redă exact șirul HTML afișat în exemplul de cod. Nu există o implementare paralelă pentru documentație.

Instalare și importuri

pnpm add @sistem-digital/tokens @sistem-digital/components

@import '@sistem-digital/components/interactive.css';

<div class="sd-date-input" role="group" aria-label="Data nașterii"><div class="sd-date-input__part sd-date-input__part--day"><label for="catalog-day">Zi</label><input id="catalog-day" inputmode="numeric" maxlength="2"></div><div class="sd-date-input__part sd-date-input__part--month"><label for="catalog-month">Lună</label><input id="catalog-month" inputmode="numeric" maxlength="2"></div><div class="sd-date-input__part sd-date-input__part--year"><label for="catalog-year">An</label><input id="catalog-year" inputmode="numeric" maxlength="4"></div></div>

Contract și surse

• Documentația familiei Interactive
• Codul sursă (site extern)
• Changelog (site extern)

Schimbarea claselor publice, a markup-ului canonic sau a comportamentului helperelor necesită versionare și instrucțiuni de migrare.

Matricea design–cod

Disponibilitatea reală a acestei componente, calculată din pachetele publicate, conform schemei matricei design–cod. Rândurile Figma, testare cu tastatura și testare cu cititor de ecran rămân „Indisponibil” până la dovezi publicate separat (kit Figma, respectiv auditul manual de accesibilitate).