Datalists für verschiedene Eingabetypen

Ich habe neulich eine HTML5-Datums-Eingabe gesehen, die den Dropdown-Pfeil auf der rechten Seite hatte, den ich gewohnt bin, anzuklicken, um einen Kalender-Datepicker anzuzeigen, aus dem ich ein Datum auswählen kann.

Normalerweise sieht das so aus

Ich habe vorher Variationen davon gesehen, zum Beispiel wenn Sie eine Wochen-Eingabe anstelle eines Datums verwenden

Aber das habe ich vorher noch nicht gesehen

Es stellt sich heraus, dass dies das Ergebnis ist, wenn Sie eine <datalist> auf eine Eingabe dieses Typs anwenden! Wer hätte das gedacht!

Das Format ist so

<input list="days" type="date">
<datalist id="days">
  <option label="Chris' Birthday">1980-08-26</option>
  <option label="Apollo 11 Moon Landing">1969-07-20</option>
  <option label="DDay">1944-06-06</option>
</datalist>

Die Werte für jede der Optionen müssen nur gültige Werte für die Eingabe sein, andernfalls werden sie einfach nicht angezeigt.

Browser-Unterstützung

Soweit ich verstehe, legt die Spezifikation keine bestimmten UI-Anforderungen für HTML5-Eingabetypen fest. Wenn ein Browser ein Datumsauswahl-Ding bauen möchte, großartig, aber es nicht zu tun verstößt nicht gegen die Spezifikation. Daher ist diese zusätzliche UI-Schönheit auch nicht erforderlich. Ich erwähne das nur, weil das Fehlen von „Unterstützung“ hier nicht darauf hindeutet, dass ein Browser schlechte Arbeit leistet.

Diese schicken Datalist-Eingaben scheinen größtenteils eine Blink-Sache zu sein.

Ein kurzer Check in den aktuellsten Browserversionen, nur mit input type="date" mit einer datalist

• Chrome 38 = funktioniert
• Opera 23 = funktioniert
• Safari 8.0 = unterstützt input type="date" nicht
• Firefox 32 = unterstützt input type="date" nicht
• Internet Explorer 11 = unterstützt input type="date" nicht
• iOS 8.1 = Datum funktioniert / Datalist nicht (siehe Screenshot)
• Android 5 = funktioniert (siehe Screenshot)
• Opera Mobile 11.5 = Datum funktioniert / Datalist nicht

"Unterstützung" bedeutet hier wieder "tut nichts Besonderes für" - fällt aber auf eine benutzbare Texteingabe zurück.

Hier liegt das Problem bei solchen Funktionen. Wenn es nur eine kleine Annehmlichkeit ist, die Sie bieten können, aber nicht entscheidend, nutzen Sie sie einfach und betrachten Sie sie als progressive Verbesserung. Wenn es absolut entscheidend ist, dass alle Benutzer Ihrer Website eine UI zur Auswahl empfohlener Optionen benötigen und Sie Browser unterstützen, die dies nicht tun, benötigen Sie entweder ein Polyfill oder eine benutzerdefinierte Lösung.

Andere Typen

Datum soll nicht den ganzen Spaß haben! Während ich das hier zusammenstellte, bin ich auf Eiji Kitamuras umfassende Testseite für das alles gestoßen. Nicht nur für text und date Eingaben kann datalist funktionieren, sondern für alle Variationen von date Eingaben sowie color und range!

type="range"

type="color"