- Dieser Artikel wurde von Kent Tamura, Softwareentwickler bei Chrome, verfasst.
Wie Sie vielleicht schon bemerkt haben, unterstützt Google Chrome seit Chrome 20 eine Datumsauswahl. Wenn Sie das type-Attribut des input-Elements auf date festlegen, kann der Nutzer auf die Pfeilschaltfläche klicken und Chrome öffnet ein praktisches Kalender-Widget.
Wir haben viel Feedback von Entwicklern erhalten und möchten in diesem Artikel einige Dinge zur optimalen Nutzung der Datumsauswahl erläutern.
Wie wirkt sich die Sprache auf das Datumsformat des Eingabewerts aus?
Nutzer können einen Datumswert in das Textfeld eines input[type=date] eingeben. Das Datumsformat im Feld wird in grauem Text angezeigt. Dieses Format wird der Einstellung des Betriebssystems entnommen.
Webautoren können das Datumsformat nicht ändern, da es derzeit keine Standards zur Angabe des Formats gibt.
Wie wird der Eingabewert beim Senden an einen Server dargestellt?
Der in der HTTP-Anfrage aus input[type=date] interpretierte Datumswert (z. B. GET / POST) wird als yyyy-mm-dd formatiert.
In welchem Format wird der Eingabewert zurückgegeben?
input.value wird unabhängig vom Präsentationsformat immer als yyyy-mm-dd zurückgegeben.
Welches Format ist für den Eingabewert zulässig?
Wenn input.value programmatisch festgelegt wird, ist für den Wert unabhängig vom Darstellungsformat sowohl für den ursprünglichen Wert als auch für den von JavaScript eingeschleusten Wert nur der Stil yyyy-mm-dd zulässig.
Wie kann ich das Aussehen der Datumsauswahl ändern?
Derzeit können Sie das Erscheinungsbild der Datumsauswahl nicht anpassen. In WebKit gab es bisher Möglichkeiten, Formularsteuerelemente mit der CSS-Property -webkit-appearance oder dem Pseudoklassen-Selektor ::-webkit-foo zu formatieren. Das Kalender-Pop-up bietet in WebKit jedoch keine solchen Möglichkeiten, da es sich wie ein Pop-up-Menü für <select> vom Dokument getrennt befindet. Außerdem gibt es derzeit keinen Standard für die Steuerung des Stils der Unterelemente.
Wie kann ich Konflikte zwischen dem jQuery-Datumspicker und der nativen Datumsauswahl vermeiden?
Wenn Sie den jQuery-Kalender auf input[type=date] in Google Chrome ausprobiert haben, haben Sie möglicherweise festgestellt, dass sich die jQuery-Benutzeroberfläche und das native Kalender-Pop-up überschneiden.
Wenn Sie den jQuery-Kalender auf allen Plattformen verwenden 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]. Derzeit gibt es keine Möglichkeit, eine einheitliche Benutzeroberfläche auf allen Plattformen mit input[type=date] zu erreichen.
Wenn Sie jQuery Datepicker 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();