Come impostare i limiti min e max in HTML5

Se stai programmando un modulo di contatto o un pannello di gestione, ti sarà sicuramente capitato di dover controllare cosa inseriscono gli utenti nei moduli. Oggi vediamo una pillola tecnica fondamentale: come gestire il calendario HTML5 utilizzando semplicemente i nativi attributi del tag <input type="date">, senza scomodare pesanti librerie JavaScript.

Impostare i giusti limiti non solo migliora l’esperienza utente (UX), ma evita anche l’inserimento di dati errati nel database.

Il Codice Base: Bloccare le date future

Se ad esempio stai registrando la lettura di un contatore o la data di nascita, l’utente non deve poter selezionare una data futura. Ecco come bloccare il calendario alla data odierna (ipotizzando oggi sia il 18 Maggio 2026):

<input 
    type="date" 
    class="form-control" 
    name="data_lettura" 
    value="2026-05-18"
    max="2026-05-18"
    required
>

Il Codice Inverso: Bloccare le date passate

Se invece gestisci un sistema di prenotazioni alberghiere o di appuntamenti, l’utente non deve poter scegliere il passato. In questo caso useremo l’attributo min:

<input 
    type="date" 
    class="form-control" 
    name="data_appuntamento" 
    value="2026-05-18"
    min="2026-05-18"
    required
>

Nota di formattazione: Ricorda che lo standard HTML5 richiede rigorosamente il formato data internazionale AAAA-MM-GG (YYYY-MM-DD). Se inserisci un formato diverso, i limiti non funzioneranno.

Altri settaggi utili per l’input date

Per gestire il calendario HTML5 come un vero professionista, ci sono altri tre attributi eccezionali che dovresti conoscere:

• Intervallo Completo (min + max insieme): Puoi definire una finestra temporale precisa. Ad esempio, una promozione valida solo per l’estate 2026: min="2026-06-21" max="2026-09-23"
• L’attributo step: Permette di saltare i giorni. Se imposti step="7", l’utente potrà cliccare solo su determinati giorni a intervalli di una settimana dal giorno di partenza.
• L’attributo readonly: Mostra il calendario e la data preimpostata, ma impedisce all’utente di modificarla, utile per i riepiloghi di conferma.

Come si fa a bloccare le date passate in un calendario HTML? Per bloccare le date passate in un calendario HTML basta inserire l’attributo min all’interno del tag <input type="date"> inserendo la data minima consentita nel formato Anno-Mese-Giorno.

Qual è il formato corretto per gli attributi min e max in HTML5? Il formato corretto è sempre YYYY-MM-DD. Ad esempio, per scrivere 18 Maggio 2026 dovrai digitare 2026-05-18. Formati come il classico italiano GG-MM-AAAA non vengono riconosciuti dal browser per i limiti.

Il blocco della data HTML5 funziona su tutti i browser? Sì, ormai tutti i browser moderni (Chrome, Safari, Edge, Firefox e i browser mobile) supportano nativamente i limiti min e max sui campi di tipo data, mostrando i giorni non disponibili in grigio e rendendoli non cliccabili.