Datums- und Zeiteingaben in Web-Formularen – Ein umfassender Leitfaden

In diesem Tutorial zeige ich dir, wie du Datums- und Zeiteingaben in deinen Web-Formularen umsetzen kannst. Dabei erläutere ich die verschiedenen Eingabetypen, die dir zur Verfügung stehen, und gebe dir wertvolle Tipps zur praktischen Anwendung. Wir behandeln sowohl die Eingabe von Datum als auch von Uhrzeit, damit du ein fundiertes Verständnis für die Implementierung dieser Funktionen erlangst.

Wichtigste Erkenntnisse

• Der Eingabetyp date ermöglicht es, nur ein Datum auszuwählen.
• Der Eingabetyp dateTime-local kombiniert Datum und Uhrzeit ohne Zeitzonenanpassung.
• Formatierung von Datums- und Zeitangaben erfolgt standardisiert nach ISO 8601.
• Browser können unterschiedliche Darstellungseigenheiten für Date- und Time-Input haben.

Grundlagen der Datums- und Zeiteingabe

Um Datums- und Zeiteingaben in deinen Formularen zu implementieren, benötigst du die HTML-Eingabetypen date, dateTime-local und time. Der date-Eingabetyp erlaubt es dem Benutzer, ein Datum auszuwählen, während der dateTime-local-Typ sowohl Datum als auch Uhrzeit erfasst. Letzteres wird ohne Zeitzonenanpassung gesendet, was bedeutet, dass die Eingabe so, wie sie vom Benutzer gemacht wird, zum Server übermittelt wird.

Jetzt schauen wir uns diese Typen im Detail an.

Verwendung des Eingabetypen date

Um ein reines Datum abzufragen, kannst du den Typ date verwenden. Dies ermöglicht dem Benutzer, ein Datum über ein eingebautes Kalender-Tool auszuwählen, was die Benutzerfreundlichkeit verbessert.

Wenn du das Kalender-Tool öffnest, kannst du verschiedene Daten auswählen und diese durch einen Klick auf „Submit“ übermitteln. Dabei wird das Datum in einem standardisierten Format übertragen: Jahr-Monat-Tag.

Es ist wichtig zu wissen, dass die Darstellung des Kalenders je nach Browser unterschiedlich sein kann. Die hinterlegten regionalen Einstellungen deines Betriebssystems beeinflussen das Format, in dem das Datum angezeigt wird.

Datums- und Zeiteingaben mit dateTime-local

Wenn du sowohl ein Datum als auch eine Uhrzeit erfassen möchtest, solltest du den Typ dateTime-local verwenden. Dies funktioniert ähnlich wie bei der Datumsabfrage, nur dass du zusätzlich eine Uhrzeit angeben kannst.

Hierbei kannst du sowohl den Tag als auch die Uhrzeit auswählen. Interessanterweise wird die Zeit im 24-Stunden-Format angezeigt, wenn in deinen lokalen Einstellungen kein AM/PM-Format aktiviert ist.

Wenn du das Formular übermittelst, erhältst du die Daten ebenfalls im ISO-Format, und die Zeit bleibt unverändert, ohne in eine andere Zeitzone umgerechnet zu werden.

Verwendung von time

Der time-Eingabetyp allein erlaubt dir, nur die Uhrzeit ohne Datum anzugeben. Über diesen Typ hast du die Möglichkeit, die Zeit auszuwählen, die dann ebenfalls im 24-Stunden-Format übertragen wird.

Einbindung weiterer Datumsformate

Neben den oben genannten Typen gibt es auch die Möglichkeit, die Eingabe von Wochen (week) und Monaten (month) zu realisieren. Mithilfe des week-Formats kannst du spezifische Wochen angeben und einfach die gewünschte Woche auswählen.

Für das month-Format gilt ähnliches. Hier hast du die Möglichkeit, nur den Monat auszuwählen, ohne spezifische Tage festzulegen.

Voreinstellungen und Werte

Ein weiterer hilfreicher Tipp ist die Möglichkeit, Voreinstellungen für deine Eingabefelder zu setzen. So kannst du beispielsweise festlegen, dass bei der Datums- und Zeitauswahl ein bestimmtes Datum standardmäßig voreingestellt ist.

Zeitzonen und Browserkompatibilität

Ein zentraler Aspekt bei der Verwendung von Datums- und Zeitangaben ist die Zeitzone. Die Eingaben werden so, wie sie lokal eingegeben werden, gespeichert. Zeitzonenanpassungen findest du in diesem Zusammenhang nicht, so dass du die lokale Zeit direkt übergeben kannst.

Es ist jedoch wichtig zu beachten, dass die Unterstützung für diese Eingabetypen je nach Browser variieren kann. Während date und dateTime-local nahezu von allen gängigen Browsern unterstützt werden, empfiehlt es sich, auf Webseiten wie "Can I use" nachzusehen, ob die spezifischen Funktionen auch in den Browsern deiner Zielgruppe funktionieren.

Zusammenfassung

Zusammengefasst hast du nun einen Überblick über die Implementierung von Datums- und Zeiteingaben in deinen Webseiten-Formularen. Du kennst die verschiedenen Eingabetypen, deren Formate und die Relevanz von Benutzereinstellungen. Denke daran, dass die richtige Formatierung und Browserunterstützung entscheidend sind, um ein nahtloses Erlebnis für deine Benutzer zu schaffen.