Formular Workshop
Lerne das Erstellen von HTML-Formularen für deinen Onlex-Formmailer
HTML5 Eingabetyp ''
date''type="date"
Stand:
Der Eingabetyp "
date" ist ein sehr nützlicher Typ, wird jedoch (noch) nicht von allen Browsern korrekt oder überhaupt interpretiert. Wie du siehst, sind es lediglich der Browser Chrome von Google und Opera.Grundgedanke ist, dass ein Feld generiert wird, welches über Pfeiltasten verfügt um zu einem bestimmten Datum zu navigieren.
Hier ein Screenshot aus Opera 11:
(Bild-Quelle: wufoo.com/html5/)
Da einige Browser diesen Typ (noch) nicht unterstützen, erhält man stattdessen ein einfaches Eingabefeld. Somit ist gewährleistet, dass eine Eingabe dennoch möglich ist.
Beispiel:
Quelltext-Auszug:
<input type="date" name="Datum" value="2012-12-07">
In diesem Beispiel sehen wir den normalen Aufbau eines Eingabefeldes mit "
date" als Typ.Die Anzeige des Datumformates richtet sich an die Einstellungen des jeweiligen Browsers: in der deutschen Schreibweise wäre dies z.B. 07.12.2012 und in der Englischen z.B. 2012-12-07.
Im o.g. Beispiel ist der Wert im
value Attribut in englischer Schreibweise, was zwingend erforderlich ist, wenn man ein Datum vorgeben möchte. Andere Formate werden nicht akzeptiert.Es gibt noch weitere Möglichkeiten eine Zeit anzugeben. Hierfür wurden weitere, mit dem "
date" Eingabetyp verwandte Eingabetypen erstellt:
-
datetime
Ausgabe von Datum und Uhrzeit mit entsprechender Zeitzone -
datetime-local
Ausgabe von Datum und Uhrzeit ohne entsprechender Zeitzone -
month
Ausgabe von Monat und Jahr -
week
Ausgabe von Woche und Jahr -
time
Ausgabe der Uhrzeit
Eine weitere Funktion, die man mit dem
date Eingabetyp verbinden kann, ist die Nutzung der Attribute min und max. Damit lässt sich eine Zeitspanne definieren, dass keine Daten vor oder nach einem bestimmten Zeitraum ausgewählt werden. Leider funktioniert dies erst im Opera.Beispiel:
Quelltext-Auszug:
<input type="date" name="Datum" min="2012-12-01" max="2012-12-31">
↑ zum Seitenanfang ↑