Data HTML: value, min, max, step e formato
HTML <input type="date"> fornisce un controllo per anno, mese e giorno. Il suo aspetto del calendario e l'ordine visualizzato possono variare a seconda del browser e della località, ma valore e valori inviati sono normalizzati in YYYY-MM-DD. Non includono l'ora o il fuso orario.
Imposta una data iniziale e l'intervallo consentito
Usa value per la data iniziale e min/max per la prima e l’ultima data consentita. Entrambi i limiti sono inclusi. Gli attributi necessitano di stringhe di data valide piuttosto che testo visualizzato localizzato come “20 maggio 2030.” Valori min o max non validi potrebbero non imporre la restrizione prevista.
name è il nome del campo inviato e id associa l’etichetta. Usa required per l’input obbligatorio. Un intervallo non fa sì che tutti i browser impediscano l’inserimento della data allo stesso modo; una data fuori intervallo inserita direttamente fallisce la validazione dei vincoli.
Esempio completo: ispeziona la stringa della data e la validità
Salva il documento seguente come date-demo.html e aprilo in un browser. Visualizza una data scelta all'interno di maggio 2030 per esercitarsi, senza effettuare prenotazioni o inviare dati a un server.
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Controllare i valori di data</title>
</head>
<body>
<h1>Esercizio sulla data di visita</h1>
<form id="demo">
<label for="visit">Data della visita (maggio 2030, obbligatoria)</label>
<input type="date" id="visit" name="visit"
value="2030-05-20" min="2030-05-01" max="2030-05-31" step="1" required>
<button type="submit">Mostra valore</button>
<button type="reset">Ripristina</button>
</form>
<p id="result" aria-live="polite"></p>
<script>
const form = document.getElementById('demo');
const result = document.getElementById('result');
form.addEventListener('submit', (event) => {
event.preventDefault();
result.textContent = 'visit = ' + new FormData(form).get('visit');
});
form.addEventListener('reset', () => { result.textContent = ''; });
</script>
</body>
</html>- Invia la data iniziale per visualizzare:
visit = 2030-05-20 - Scegli un'altra data di maggio e inviala per visualizzarne la stringa di data. Una data al di fuori dell'intervallo è bloccata dalla convalida min/max.
- Cancella la data e invia: la convalida obbligatoria la blocca. Reset ritorna al 20 maggio.
L'unità step è giorni e il valore predefinito è 1. Cambia solo il passo a 7 nell'esempio: il 1° maggio, la data minima, diventa la base, quindi 1, 8, 15, 22 e 29 maggio rientrano nell'intervallo. Il valore iniziale del 20 maggio non è più valido. Confronta una selezione valida dell'8 maggio, quindi ripristina il passo a 1 per consentire ogni giorno. Un'unica impostazione del passo non implementa un calendario aziendale con weekend o festività.
Formati di visualizzazione, fusi orari e convalida del server
Non inserire slash o stringhe localizzate nel valore per modificare il selettore data specifico della locale. Se hai bisogno solo di una data del calendario, considerarla come una stringa evita conversioni di fuso orario non necessarie. I dati che necessitano anche di un'ora richiedono più della sola data e una specifica politica sul fuso orario.
Controlla la larghezza con CSS piuttosto che con un attributo size. Fornisci un'etichetta e una spiegazione dell'intervallo, e convalida le date effettive, gli anni bisestili, gli intervalli e la disponibilità aziendale sul server per i controlli non supportati o le richieste che bypassano i controlli del browser. Selezionare una data non prenota un posto né conferma la disponibilità attuale dei posti. Il riferimento all'input date MDN spiega le regole degli attributi.
