Der Eingabetyp Date, neue bei HTML5

Der Eingabetyp Date, neue bei HTML5

Posted by ariesprodesign in Allgemein, HTML5, Internet, JavaScript, Programmierung, Webdesign 29 Mai 2014

Diese neue HTML5 Datumseingabe wird das Problem von vielen Webentwicklern beim Erstellen von Kalenderwerkzeuge in ihren Web-Formularen lösen.

Ich denke, es ist ein große Vorschritt für alle, die dafür jQuery Plugins eingesetzt haben. Mit dem neuen HTML5-Tag wird die Implementierung von so genannten Datepicker sehr leicht.

Der Weg um einen HTML5-Datepicker zu setzen ist sehr einfach. Hier ist der Code:

Einige der Features des Etiketts:

  1. Es wird standardmäßig folgende Format zurückgegeben: JJJJ-MM-TT
  2. Mit dem Attribut „min“ kann man ein Mindestdatum definieren (siehe unten: Beispiel).
  3. Mit dem Attribut „max“ kann man ein Maximaldatum definieren (siehe unten: Beispiel).
  4. Mit dem Attribut „value“ kann man ein Standardwert definieren.
  5. Mit dem Attribut “step” werden die Schrittstufen einer Eingabe (die Granularität) gesteuert. Mögliche Werte: day (Standard), week und month.

Beispiel: So akzeptiert <input type=date min=2010-01-01 max=2010-12-31> kein Datum, dass sich nicht in Jahr 2010 befindet.

Hier ein Beispiel mit alle Attributen.

Achtung: Natürlich steckt HTML5 hier noch in den Kinderschuhen und es wird noch nicht von alle Browsern unterstützt. Bei Chrome funktioniert es einwandfrei. Ich empfehle Ihnen, erst mit modernizr zu testen, ob der Browser dieses Feature unterstützt, sollte dies nicht der Fall sein, können Sie immer noch auf die jQuery Alternative zurückgreifen. Beispiel:

 

Modernizr können Sie hier runterladen: Modernizr

jQueryUI finden Sie hier:  jQuery UI Datepicker

Dojo finden Sie hier: dojox.widget.Calendar

Schlagwörter: , , ,

Schreiben Sie einen Kommentar