Schnelle FAQs zur Eingabe [type=date] in Google Chrome

Eiji Kitamura
Eiji Kitamura

  • Dieser Artikel wurde vom Chrome-Softwareentwickler Kent Tamura verfasst.

Wie Sie vielleicht bereits bemerkt haben, unterstützt Google Chrome eine Datumsauswahl seit Chrome 20. Dazu setzt er einfach das type-Attribut des input-Elements auf date. Der Nutzer kann dann auf die Pfeilschaltfläche klicken und Chrome zeigt ein praktisches Kalender-Widget an.

Da wir viel Feedback von Entwicklern erhalten haben, möchten wir in diesem Artikel einige Punkte zur optimalen Nutzung der Datumsauswahl erläutern.

Wie wirkt sich das Gebietsschema auf das Datumsformat des Eingabewerts aus?

Nutzer können einen Datumswert in das Textfeld eines input[type=date] eingeben, wobei das Datumsformat im Feld als grauer Text angezeigt wird. Dieses Format wird aus den Einstellungen des Betriebssystems übernommen.

Bildschirm "Datumsformate"

Webautoren haben keine Möglichkeit, das Datumsformat zu ändern, da es derzeit keine Standards zur Angabe des Formats gibt.

Wie wird der Eingabewert beim Senden an einen Server dargestellt?

Der Datumswert, der von input[type=date] in der HTTP-Anfrage (z. B. GET / POST) interpretiert wurde, wird als yyyy-mm-dd formatiert.

Welche Art von Format gibt der Eingabewert zurück?

input.value gibt unabhängig vom Präsentationsformat immer yyyy-mm-dd zurück.

Welches Format wird für den Eingabewert akzeptiert?

Wenn Sie input.value programmatisch festlegen, wird für den Wert unabhängig vom Präsentationsformat sowohl für den Ausgangswert als auch für den in JavaScript eingefügten Wert nur das Format yyyy-mm-dd akzeptiert.

Wie ändere ich die Darstellung der Datumsauswahl?

Derzeit können Sie die Darstellung der Datumsauswahl nicht gestalten. In WebKit gibt es bereits Möglichkeiten, Formularsteuerelemente mit der CSS-Eigenschaft -webkit-appearance oder dem Pseudoklassenselektor ::-webkit-foo zu gestalten. Das Kalender-Pop-up bietet diese Möglichkeit in WebKit jedoch nicht, da es vom Dokument getrennt ist, wie etwa ein Pop-up-Menü für <select>, und es derzeit keinen Standard gibt, wie der Stil der Unterelemente gesteuert werden kann.

Wie vermeide ich Konflikte zwischen der Datumsauswahl in jQuery und der nativen Datumsauswahl?

Wenn Sie die Datumsauswahl für jQuery in Google Chrome für input[type=date] ausprobiert haben, sind Ihnen möglicherweise überlappende Kalender sowohl der jQuery-Benutzeroberfläche als auch des nativen Kalender-Pop-ups aufgefallen. Wenn Sie die Datumsauswahl für jQuery auf alle Plattformen anwenden möchten, verwenden Sie input[type=text] anstelle von input[type=date]. Nicht nur Google Chrome, sondern auch iOS Safari, der BlackBerry-Browser und Opera haben eine eigene Benutzeroberfläche für input[type=date]. Es gibt derzeit keine Möglichkeit, mit input[type=date] eine einheitliche Benutzeroberfläche auf allen Plattformen zu erreichen. Wenn Sie die Datumsauswahl für jQuery nur auf Plattformen ohne input[type=date]-Unterstützung anwenden möchten, können Sie Modernizr oder den folgenden Code verwenden:

var isDateInputSupported = function(){
var elem = document.createElement('input');
elem.setAttribute('type','date');
elem.value = 'foo';
return (elem.type == 'date' && elem.value != 'foo');
}

if (!isDateInputSupported())  // or.. !Modernizr.inputtypes.date
    $('input[type="date"]').datepicker();