Corsi on-line

I nuovi input type di HTML 5.1

Tra le novità di HTML 5.1 vi sono anche alcuni input type, o campi di input, appositamente dedicati alle date, nello specifico parliamo di month, week e datetime-local. Come sottolineato descrivendo altre tipologie di attributi introdotte con questo aggiornamento, anche in questo caso il loro utilizzo dovrà essere testato con attenzione prima di passare alla fase di produzione, questo perché per il momento il supporto cross-browser completo non viene ancora garantito.

html51

month e week consentiranno di selezionare i valori relativi ad una specifica settimana o ad un determinato mese dell’anno; nel caso delle attuali versioni di Google Chrome essi verranno messi a disposizione attraverso un calendario dropdown:

<form name="nomeForm" action="elabora.php">
<input type="week" name="selezionaSettimana">
<input type="month" name="selezionaMese">
<button>Invia</button>
</form>

Mentre volendo accedere ai rispettivi valori tramite JavaScript verranno intercettate delle stringhe simili a “2016-W34” (XXXIV settima del 2016) per week, “2016-12” (dicembre 2016) per month.

Diverso il discorso per quanto riguarda datetime-local la cui implementazione è stata protagonista di un parto più travagliato; inizialmente infatti di prevedeva di separare gli input type datetime e datetime-local, con la particolarità che il secondo consente di selezionare esclusivamente un dato temporale calcolato sulla base della timezone dell’utente corrente.

Alla fine datetime, non vincolato invece alla timezone, è stato rimosso per lasciare spazio al solo datetime-local che viene rappresentato sintatticamente da due parti differenti: la data, elemento selezionabile come accade per month e week, e la parte relativa al “tempo“, definibile separatamente.

L’esempio seguente mostra come rendere visibile tramite JavaScript il dato contenuto in un campo form di tipo datetime-local, per comodità è stato indicato un valore predefinito che potrà comunque essere modificato digitandone uno differente:

<!DOCTYPE html>
<html>
<body>
<h1>Accedere al dato datetime-local con JavaScript</h1>
<input type="datetime-local" id="dataLocale" value="2016-12-05T16:45:31">
<p>Invia per visualizzare il dato.</p>
<button onclick="getDtl()">Invia</button>
<p id="container"></p>
<script>
function getDtl() {
    var x = document.getElementById("dataLocale").value;
    document.getElementById("container").innerHTML = x;
}
</script>
</body>
</html>

Si consiglia di testare lo script precedentemente proposto tramite Google Chrome perché non supportato dai browser Web Mozilla Firefox (per ora) e Internet Explorer 12.

Post correlati
I più letti del mese
Tematiche