<input type=date> și <input type=datetime-local> în HTML

<input type="date" name="data" min="2026-01-01" max="2026-12-31">
<input type="datetime-local" name="programare">

Ce face <input type=date> și <input type=datetime-local>

<input type="date"> afișează un câmp de dată cu un calendar nativ din care utilizatorul alege ziua. Afișarea urmează limba și setările regionale ale browserului (de exemplu 25.10.2026), dar valoarea trimisă la server este mereu în formatul AAAA-LL-ZZ: 2026-10-25.

<input type="datetime-local"> adaugă ora și trimite o valoare ca 2026-10-25T14:30. „Local” înseamnă că nu conține fusul orar: este ora pe care a ales-o utilizatorul, fără informație despre zona lui. Firefox afișează selector de oră abia din versiunea 154 (înainte, ora se scria de mână), iar Safari arată calendarul, dar ora se scrie de mână.

Atributele min și max se scriu în același format standard și limitează zilele care pot fi alese. step se măsoară în zile la date și în secunde la datetime-local (implicit 60, adică minute întregi).

Atribute

Atribut	Descriere
min / max	Prima și ultima dată acceptată, în format AAAA-LL-ZZ (sau AAAA-LL-ZZThh:mm pentru datetime-local).
step	Pasul: în zile pentru date (implicit 1), în secunde pentru datetime-local (implicit 60).
value	Valoarea inițială, în formatul standard.
required	Câmpul nu poate rămâne gol.

Exemple

Exemplul 1: Data nașterii cu limită maximă

Nu poate fi aleasă o dată după 25 octombrie 2008 (utilizatorul trebuie să aibă cel puțin 18 ani la data paginii).

<label for="nastere">Data nașterii</label>
<input type="date" id="nastere" name="data_nasterii"
       min="1920-01-01" max="2008-10-25" required>

Ce afișează browserul

Câmp cu zz.ll.aaaa și o pictogramă de calendar.
În calendar, zilele de după 25.10.2008 sunt gri și nu pot fi alese.
Serverul primește data_nasterii=1995-03-14.

Exemplul 2: Programare la medic, din jumătate în jumătate de oră

step="1800" (1800 de secunde = 30 de minute) acceptă doar orele fixe și jumătățile de oră.

<label for="programare">Data și ora programării</label>
<input type="datetime-local" id="programare" name="programare"
       min="2026-11-02T08:00" max="2026-11-30T18:00" step="1800">

Ce afișează browserul

Câmp pentru dată și oră.
2026-11-03T10:30 este acceptată; 2026-11-03T10:45 este respinsă la trimitere, cu propunerea celor mai apropiate ore valide (10:30 și 11:00).

Greșeli frecvente

• Scrierea lui min, max sau value în format românesc (25.10.2026): browserul le ignoră. Formatul corect este 2026-10-25.
• Tratarea lui datetime-local ca oră universală: valoarea nu are fus orar, deci serverul trebuie să știe în ce zonă a fost aleasă ora.
• Verificarea limitelor doar în browser: serverul trebuie să valideze și el data primită.

Comenzi înrudite

• <input>: Cel mai versatil element de formular: își schimbă complet aspectul și funcția în funcție de atributul type.
• <form>: Containerul principal pentru colectarea datelor de la utilizator și trimiterea lor către un server.
• <label>: Etichetă accesibilă pentru un control de formular: dând clic pe etichetă, activezi sau bifezi câmpul asociat.
• <input type=number>: Câmpul pentru valori numerice, cu limite min și max, pas de creștere și butoane de mărire și micșorare.