Datum überprüfen

HTML5 bietet einem die Möglichkeit auch ein Datum überprüfen zu lassen. Browser die das date Attribut verstehen, können dem Nutzer von z.B. Smartphones einen Kalender anbieten, aus dem das Datum ausgewählt werden kann. Das verhindert auch, dass ein falsches Datum oder Datumsformat eingetragen werden können.

Das date Element stellt sechs verschiedene Wege bereit wie ein Datum definiert werden kann: Datum, Monat, Woche, Zeit, Datum + Zeit und Datum + Zeit + Zeitzone. Bis jetzt ist der Support eher spärlich, da bisher nur Opera einen Dropdown Kalender bereitstellt und Chrome das absolute Minimum -eine Box in der der Nutzer keine falschen Zahlen eingeben kann. Deswegen sollte man, wenn man das date Element benutzen möchte, einen polyfill benutzen um die volle Funktionalität zu erhalten.

Wenn ihr das "Try this example" Feature benutzt, dann sei gesagt, dass kein polyfill implementiert wurde um das date Element zu unterstützen. Daher zeigt das Beispiel auch direkt ob der aktuell genutzte Browser das Element auch unterstützt. (Seit 2012, was dem Jahr der Erstellung des Artikels entsprechen müsste, bis zur Übersetzung 2018, hat sich natürlich auch einiges getan. Vor allem was die Unterstützung von HTML5 in den Browsern angeht)

Datum

Das Datumsformat ist ist auch abhängig von der eingestellten Region. In den USA wäre das Standard-Format YYYY-MM-DD, in Deutschland hingegen TT.MM.JJJJ. Der 30 Oktober 2018 würde also entweder als 2018-10-30 oder als 30.10.2018 durch den Browser dargestellt. Der date type wird aber durch die Browser meist richtig gedeutet und dargestellt.

<form>
  <input type="date">
  <input type="submit" value="Submit Now!">
</form>

Monat

Das Monatsformat ist ebenso wie das Datumsformat abhängig von der eingestellten Region. In den USA YYYY-MM, in Deutschland MM.JJJJ. Oktober 2018 würde also entweder als 2018-10 oder als 10.2018 dargestellt.

<form>
  <input type="month">
  <input type="submit" value="Submit Now!">
</form>

Woche

Manchmal ist alles was man benötigt die Woche. Das Format dafür wäre YYYY-Www, was die Kalanderwoche 42 des Jahres 2018 als 2018-W42 ausgeben würde.

<form>
  <input type="week">
  <input type="submit" value="Submit Now!">
</form>

Zeit

Manchmal benötigt man aber auch die Uhrzeit. Der time Typ ist immer im 24 Stunden Format gerendert. Das Format ist HH:mm:ss.ss wobei die Sekundenanzeige hier optional ist. Um das amerikanische Zeit-Beispiel aufzugreifen: 4.30pm wird angezeigt als 16:30 oder, mit der Sekundenanzeige als z.B. 16:30:23.4

<form>
  <input type="time">
  <input type="submit" value="Submit Now!">
</form>

Datum und Zeit

Der datetime Typ ist recht lang. Die Formatierung wäre YYYY-MM-DD THH:mm:ss.ss oder im deutschen Format TT.MM.JJJJ HH:mm:ss.ss.

<form>
  <input type="datetime">
  <input type="submit" value="Submit Now!">
</form>

Was wir gelernt haben

• Es gibt unterschiedliche Wege ein gültiges Datum anzuzeigen
• Der Support für das date Attribut ist noch recht spärlich (2012) und man sollte ein polyfill benutzen um vollen Support zu gewährleisten. (Heute, 2018, würde ich erst einmal probieren ob der Support nach 6 Jahren immer noch nicht gewährleistet ist, bevor ich ein polyfill ausprobieren würde)