HTML5 Datumsfelder für IE11 und Safari Desktop mit jQuery UI Datepicker

Lange ist es her, dass es hier im lolliblog webentwicklungs-technisch zu ging. In den letzten Wochen hatte ich beruflich mit dem Aufbau eines umfangreichen Registrierungsformulars zu tun. Ein Formular, welches auf mehrere Tabs verteilt ist und bereits vorm Absenden der Registrierung die einzelnen Schritte validiert und den User auf eventuelle Fehler hinweist. Soweit so gut. Die Template-Umsetzung und Anbindung an die API eines Kollegen war im Vergleich ein Kinderspiel. Was jedoch massig Stress verursachte, war das Cross-Browserfixing für die alten Internet Explorer Versionen und die – wer hätte das gedacht – Desktop-Version des Safari-Browsers.

Browsersupport: HTML5 Datumsfeld mit Auswahlfunktion

In der Regel teste ich die entwickelten Webseiten mit dem Firefox-Browser. Dieser unterstützt die Datumsauswahl bei Input-Feldern vom Typ „date“ perfekt und bietet dem Nutzer eine Kalender-basierte Selektionsmöglichkeit an. Der Chrome-Browser kann das übrigens ebenfalls. Genauso wie der Microsoft Edge, welcher tatsächlich im Vergleich zu den problembehafteten IEs vergangener Tage, einen großen Sprung nach vorn gemacht hat. Die HTML5 Code-Basis hier für ist die folgende:

<input type="date" name="geburtstag" id="geburtstag" placeholder="Datum wählen" required>

Da der beauftragende Kunde des Registrierungsformulars noch den Internet Explorer 11 einsetzt (wie übrigens leider viel zu viele Menschen da draussen), war mir klar, dass ich eine alternative Auswahlmöglichkeit für den IE11 bereitstellen musste. Da ohnehin recht viel via jQuery im Hintergrund läuft, lag der Einsatz des jQuery UI Datepickers nahe. Damit dieser auch nur dort eingesetzt werden muss, wo es nötig ist, wird zusätzlich der modernizr eingesetzt. Daraus ergibt sich dann grundlegend folgende Konfiguration für den IE11:

if (!Modernizr.inputtypes.date) {
$('input[type=date], .datepicker').keydown(function() { return false });
$('input[type=date], .datepicker').datepicker({
  yearRange: "-80:-18",
  dateFormat: 'dd.mm.yy',
  changeMonth: true,
  changeYear: true,
  defaultDate: "-18y",
  firstDay: 1,

  onSelect: function (selectedDate) {
    $('#ui-datepicker-div table td a').attr('href', 'javascript:void(0);');
      $(this).blur();
    }
});
}

jQuery UI Datepicker Konfiguration

Was passiert hier genau? Mit der keydown()-Methode unterbinden wir als erstes die Möglichkeit das Datumsfeld per Tastatur auszufüllen. dateFormat legt das Datumsformat fest. changeMonth und changeYear erlaubt die Änderung der Monate und Jahre. Das defaultDate setzen wir auf das heutige Datum minus 18 Jahre um direkt das Mindestalter zu visualisieren. Per yearRange definieren wir die möglichen Werte für die Jahresauswahl (in dem Beispiel also heutiges Datum – 18 Jahre bzw. maximal – 18 Jahre. firstDay setzt den ersten Tag der Woche auf den Montag. Mit der onSelect-Funktion bestimmen wir was nach Auswahl eines Datums passieren soll. Leider verlinkt der Datepicker standardmäßig auf „#“, was einige Browser dazu ermutigt den Viewport nach oben zu verschieben und zur Scrollposition 0 zu springen. Um das zu verhindern, setzen wir einfach das href-Attribut des Links zur Laufzeit auf „javascript:“. Etwas dirty, aber funktioniert.

Datepicker mit Foundation und der Abide-Formvalidierung

Nun funktioniert zwar die Datumsauswahl und wir bekommen ein Datum im tt.mm.jjjj-Format zurück, aber was wenn das Registrierungsformular auf dem Framework Foundation basiert und zusätzlich eine Formvalidierung mithilfe von Abide im Einsatz ist? Dann haben wir nämlich ein Problem.

Foundation ist ein großartiges Framework, welches viele tolle und nützliche Dinge von Haus aus mitbringt – so auch die Validierung von Formulareingaben. Abide erweitert die HTML5-Validierung moderner Browser. Bei einem Input-Element vom Typ „date“ prüft Abide also das Element auf ein konformes Datum. Da wir die Werte aber mittels jQuery UI Datepicker manipulieren, schlägt die Validierung fehl und eine entsprechende Hinweismeldung erscheint. Gelöst haben wir das durch eine Typenänderung des Inputfeldes für Safari Desktop und IE11. Das gelingt via:

$('input[type=date], .datepicker').attr('type','text');

Diese Zeile muss innerhalb der modernizr Abfrage platziert werden. Am besten direkt hinter if(!Modernizr.inputtypes.date) {  .

Nachteile und bekannte Probleme sind die Konvertierung des Datums in das reguläre Rückgabeformat des HTML5 Datumsfeldes. Die HTML5-Date-Felder geben standardmäßig im Firefox, Chrome und Edge geben ein Datum im Format yyyy-mm-dd zurück, wir mit unserer Datepicker-Methode allerdings ein lesbares Datum in Form von dd.mm.yyyy. Wer hier eine Idee hat, immer gern her damit …