Selezione data HTML5

Recentemente ho postato che avevo deciso di utilizzare Opera nelle mie dimostrazioni HTML5 per RMOUG Training Days 2011. Come ho affermato in quel post, una grande ragione per aggiungere il browser web Opera al set in dimostrazione è che supporta alcune delle funzionalità HTML5 meglio degli altri browser. Questo post illustrerà uno di questi casi: i selettori di date HTML5.

Una delle piccole ma belle cose dell'utilizzo di Flex o di una libreria JavaScript come JQuery è la disponibilità di meccanismi integrati per controlli di input user-friendly. In particolare, un buon selettore di date è sempre apprezzato.

HTML5 è attualmente previsto per offrire un widget di selezione della data standard che può essere utilizzato con i tag HTML. In questo post, esamino lo stato dei selettori di date HTML5 nelle recenti versioni non beta di cinque browser Web popolari (Chrome 8, Safari 5, Firefox 3.6, Internet Explorer 8 e Opera 11).

HTML supporta vari campi di input tramite il tag di input. I diversi tipi di campi di input vengono specificati tramite l' attributo inputdell'elemento type. HTML5 aumenta notevolmente il numero di messaggi di posta typeelettronica disponibili che possono essere specificati. Molti dei nuovi valori per l' typeattributo include quelli relativi alla data / ora: date, datetime, datetime-local, month, week, e time. Ciascuno di questi è illustrato nel seguente frammento di codice HTML.

   HTML5 Date Pickers Demonstrated    
    
Input Type Input Field
date
datetime
datetime-local
month
week
time

Dei cinque browser web che ho elencato in precedenza, Opera fornisce di gran lunga l'implementazione più sofisticata della data / ora typedel inputtag. Iniziando con il positivo, le prime diverse istantanee dello schermo mostrano come questo semplice HTML viene visualizzato in Opera 11.

Opera 11 Rendering iniziale della pagina

Opera 11 Input Tag "date" Attributo

Attributo "datetime" del tag di input di Opera 11

Attributo "datetime-local" del tag di input di Opera 11

Attributo "mese" del tag di input di Opera 11

L'implementazione di Opera evidenzia l'intero mese che verrà selezionato.

Opera 11 Input Tag "week" Attributo

Opera evidenzia la settimana che verrà selezionata.

Opera 11 Input Tag "time" Attributo

Opera 11 - Tutti i campi di input selezionati

L'implementazione di Opera dei campi di input di data / ora è impressionante. Vorrei che si potesse dire lo stesso per gli altri browser non beta. Purtroppo, gli altri browser non forniscono supporto per questi tipi di campo vicino a questo elegante. In effetti, non credo valga nemmeno la pena includere qui tutte le istantanee dello schermo. Invece, mostro semplicemente un'istantanea dello schermo di ciascuno dopo aver compilato tutti i campi. Nella maggior parte dei casi, i browser trattavano semplicemente questi campi come semplici campi di tipo "testo".

Selettori di data di Firefox 3.6: sono solo testo

Selettori di data di Internet Explorer 8: sono solo testo

Selettori di date di Safari 5: sono solo testo con evidenziazione attiva

Selettori di data di Chrome 8: non proprio lì

Sebbene non sia elegante come il trattamento dei campi data / ora da parte di Opera, il browser Chrome considera questi campi come qualcosa di più del testo e limita ciò che può essere inserito nei campi. Sfortunatamente, non ci sono simpatici popup di selezione di data / ora come quelli forniti da Opera. Tuttavia, l'evidenziazione del campo focalizzato è piacevole e il fatto che i dati selezionati siano in qualche modo data / ora come nel formato aiuta.

Conclusione

Attendo con ansia il giorno in cui i principali browser supportano costantemente controlli di data / ora standardizzati in modo che semplici tag di "input" HTML con gli attributi appropriati rendano selettori di data / ora eleganti e stilistici su qualsiasi browser. Opera 11 attualmente è in testa al gruppo e fornisce la migliore illustrazione di ciò che potrebbe essere.

Questa storia, "Selezione data HTML5" è stata originariamente pubblicata da JavaWorld.