Jeg skrev for nylig, at jeg havde besluttet at bruge Opera i mine HTML5-demonstrationer til RMOUG Training Days 2011. Som jeg sagde i dette indlæg, er en stor grund til at føje Opera-webbrowseren til det sæt, der demonstreres, at den understøtter nogle af HTML5-funktionerne. bedre end de andre browsere. Dette indlæg illustrerer en af disse tilfælde: HTML5-datovælgerne.
En af de små, men gode ting ved brug af Flex eller et JavaScript-bibliotek som JQuery er tilgængeligheden af indbyggede mekanismer til brugervenlige inputkontroller. Især er en god datovælger altid værdsat.
HTML5 er i øjeblikket bestemt til at tilbyde en standard datovælger-widget, der kan bruges med HTML-tags. I dette indlæg ser jeg på tilstanden af HTML5-datovælgerne i de seneste ikke-beta-versioner af fem populære webbrowsere (Chrome 8, Safari 5, Firefox 3.6, Internet Explorer 8 og Opera 11).
HTML understøtter forskellige inputfelter via input-tagget. De forskellige typer inputfelter specificeres via input elementets type attribut. HTML5 øger antallet af tilgængelige markant types der kan specificeres. Flere af de nye værdier for type attribut inkluderer dem, der er relateret til dato / tid: dato, dato tid, datetime-local, måned, ugeog tid. Hver af disse er illustreret i det følgende HTML-kodestykke.
HTML5 dato plukkere demonstreret Indgangstype Indtastningsfelt dato dato tid datetime-local måned uge tid
Af de fem webbrowsere, jeg tidligere har nævnt, leverer Opera langt den mest sofistikerede implementering af dato / tid types af input tag. Begyndende med det positive viser de første adskillige skærmbilleder, hvordan denne enkle HTML gengives i Opera 11.
Opera 11 Indledende gengivelse af side
Opera 11 Input Tag "dato" Attribut
Opera 11 Input Tag "datetime" -attribut
Opera 11 Input Tag "datetime-local" attribut
Opera 11 Input Tag "måned" Attribut
Operas implementering fremhæver hele den måned, der vælges.
Opera 11 Input Tag "week" Attribute
Opera fremhæver den uge, der vælges.
Opera 11 Input Tag "time" Attribute
Opera 11 - Alle valgte indtastningsfelter
Operas implementering af indtastningsfelterne dato / tid er imponerende. Jeg ville ønske, at det samme kunne siges om de andre browsere, der ikke er beta. Desværre yder de andre browsere ikke support til disse felttyper overalt i nærheden af denne elegante. Faktisk tror jeg ikke, det er engang værd at medtage alle deres skærmbilleder her. I stedet viser jeg simpelthen et skærmbillede af hvert efter at have udfyldt alle felterne. I de fleste tilfælde behandlede browserne simpelthen disse felter som enkle "tekst" -typefelter.
Firefox 3.6 Datovælgere: De er bare tekst
Internet Explorer 8 datovælgere: De er bare tekst
Safari 5 Date Pickers: De er bare tekst med fokusmarkering
Chrome 8 Date Pickers: Ikke helt der
Selvom det ikke er så elegant som Operas behandling af dato- / tidsfelter, behandler Chrome-browseren disse felter som mere end tekst og begrænser, hvad der kan indtastes i felterne. Desværre er der ingen pæne pop op-pop op-vinduer, som Opera giver. Alligevel er det fokuserede feltbelysning pænt, og det faktum, at valgte data er noget dato / tid som i format hjælper.
Konklusion
Jeg glæder mig til den dag, hvor de store browsere konsekvent understøtter standardiserede dato / tidskontroller, så enkle HTML "input" tags med de relevante attributter vil gengive elegante og stilistiske dato / tid vælgere i enhver browser. Opera 11 fører i øjeblikket pakken og giver den bedste illustration af, hvad der kunne være.
Denne historie, "HTML5 Date Picker" blev oprindeligt udgivet af JavaWorld.
