HTML5 Datumsauswahl

Ich habe kürzlich veröffentlicht, dass ich mich für die Verwendung von Opera in meinen HTML5-Demonstrationen für die RMOUG Training Days 2011 entschieden habe. Wie ich in diesem Beitrag angegeben habe, besteht ein wichtiger Grund für das Hinzufügen des Opera-Webbrowsers zu dem vorgestellten Set darin, dass einige der HTML5-Funktionen unterstützt werden besser als die anderen Browser. Dieser Beitrag veranschaulicht einen dieser Fälle: die HTML5-Datumsauswahl.

Eines der kleinen, aber feinen Dinge bei der Verwendung von Flex oder einer JavaScript-Bibliothek wie JQuery ist die Verfügbarkeit integrierter Mechanismen für benutzerfreundliche Eingabesteuerungen. Insbesondere eine gute Datumsauswahl wird immer geschätzt.

HTML5 soll derzeit ein Standard-Datumsauswahl-Widget anbieten, das mit HTML-Tags verwendet werden kann. In diesem Beitrag beschäftige ich mich mit dem Status der HTML5-Datumsauswahl in den neuesten Nicht-Beta-Versionen von fünf gängigen Webbrowsern (Chrome 8, Safari 5, Firefox 3.6, Internet Explorer 8 und Opera 11).

HTML unterstützt verschiedene Eingabefelder über das Eingabe-Tag. Die verschiedenen Arten von Eingabefeldern werden über das Attribut des inputElements angegeben type. HTML5 erhöht die Anzahl der verfügbaren types, die angegeben werden können, dramatisch . Mehrere der neuen Werte für das typeAttribut der im Zusammenhang mit Datum / Uhrzeit sind: date, datetime, datetime-local, month, week, und time. Jedes davon ist im folgenden HTML-Code-Snippet dargestellt.

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

Von den fünf zuvor aufgelisteten Webbrowsern bietet Opera die mit Abstand ausgefeilteste Implementierung von Datum und Uhrzeit typedes inputTags. Beginnend mit dem Positiven zeigen die ersten Screenshots, wie dieser einfache HTML-Code in Opera 11 gerendert wird.

Opera 11 Erstes Rendern der Seite

Opera 11 Input Tag "Datum" -Attribut

Opera 11 Input Tag "datetime" -Attribut

Opera 11 Input Tag "datetime-local" -Attribut

Opera 11 Input Tag "Monat" -Attribut

Die Implementierung von Opera hebt den gesamten Monat hervor, der ausgewählt wird.

Opera 11 Input Tag "Woche" -Attribut

Opera hebt die Woche hervor, die ausgewählt wird.

Opera 11 Input Tag "Zeit" -Attribut

Opera 11 - Alle ausgewählten Eingabefelder

Die Implementierung der Datums- / Uhrzeit-Eingabefelder durch Opera ist beeindruckend. Ich wünschte, dasselbe könnte für die anderen Nicht-Beta-Browser gesagt werden. Leider bieten die anderen Browser keine Unterstützung für diese Feldtypen in der Nähe dieses eleganten. Tatsächlich denke ich nicht, dass es sich überhaupt lohnt, all ihre Screenshots hier aufzunehmen. Stattdessen zeige ich einfach einen Screenshot von jedem, nachdem ich alle Felder ausgefüllt habe. In den meisten Fällen behandelten die Browser diese Felder einfach als einfache Felder vom Typ "Text".

Firefox 3.6 Datumsauswahl: Sie sind nur Text

Internet Explorer 8 Datumsauswahl: Sie sind nur Text

Safari 5-Datumsauswahl: Sie sind nur Text mit Fokushervorhebung

Chrome 8 Date Pickers: Nicht ganz da

Obwohl der Chrome-Browser nicht so elegant ist wie die Behandlung von Datums- / Zeitfeldern durch Opera, behandelt er diese Felder als mehr als Text und schränkt die Eingabe in die Felder ein. Leider gibt es keine netten Popups zur Datums- / Uhrzeitauswahl, wie sie Opera bietet. Trotzdem ist die Hervorhebung des fokussierten Feldes schön und die Tatsache, dass die ausgewählten Daten ein Datum / eine Uhrzeit wie im Format haben, hilft.

Fazit

Ich freue mich auf den Tag, an dem die wichtigsten Browser standardmäßig standardisierte Datums- / Zeitsteuerungen unterstützen, sodass einfache HTML-Tags für die Eingabe mit den entsprechenden Attributen elegante und stilistische Datums- / Zeitauswahl in jedem Browser darstellen. Opera 11 ist derzeit führend und bietet die beste Illustration dessen, was sein könnte.

Diese Geschichte "HTML5 Date Picker" wurde ursprünglich von JavaWorld veröffentlicht.