In einem meiner Adventskalenderbeiträge habe ich auch beschrieben, wie ihr Bereichsattribute für Datumsfelder setzen könnt. In einem Kommentar wurde ich darauf hingewiesen, dass dieses neue Eingabefeld bisher noch nicht in Firefox unterstützt wird. Es wird wohl zukünftig unterstützt (ab Verion Firefox 56+ kann es über einen Flag aktiviert werden), aber bis dahin sollten wir einen Fallback implementieren.

Browsersupport prüfen

Ich bevorzuge die nativen Eingabeelemente gegenüber den JavaScript basierten Datumsauswahlfeldern, besonders auf mobilen Geräten. Um zu prüfen, ob der Browser diese neuen Felder unterstützt, könnt ihr diesen einfachen Test verwenden:

jQuery( document ).ready( function ( $ ) {
	var $date_fields = $( '.date-fields-selector' );
	if ( 'text' == $date_fields[0].type ) {
		$date_fields.datepicker( {
			// Optionale Datepicker Optionen
		} );
	}
} );

Zuerst wählen wir alle Datumsfelder mit einem geeigneten CSS-Selekor aus. Dann prüfen wir, ob der Typ des ersten Felds text ist und nicht date, wie es sein sollte, wenn der Browser den Feldtyp unterstützt. Wenn die Bedingung also wahr ist, dann verwenden wir den jQuery Datepicker für diese Felder.

Laden der Datepicker Dateien

Um den Datepicker verwenden zu können, müssen die JavaScript Dateien dafür geladen werden. Da diese mit WordPress ausgeliefert werden, können wir sie einfach einbinden:

wp_enqueue_script( 'jquery-ui-datepicker' );

Dies fügt allerdings nur die JavaScript Dateien ein. Die Styles sind nicht in WordPress enthalten. Eventuell ist solche Styles in eurem Theme enthalten. Falls nicht, könnt ihr beispielsweise den „jQuery Download Builder“ verwenden. Alternativ werden diese auch auf verschiedenen CDNs wie etwa den „Google Hoster Libraries“ zur Verfügung gestellt.

Fazit

Meiner Meinung nach sollte man immer die nativen Browserfeatures nutzen, für UI-Elemente wie Datumsauswahl, Farbwähler oder Dropdowns. Falls ihr diese nicht auf allen Geräten verwenden könnt, implementiert nur einen Fallback für diese Geräte, solange es keine guten Gründe gibt, die für eigene UI-Elemente sprechen (we ein konsistenter Style-Guide).

Wie sieht es bei euch aus? Verwendet ihr diese neuen Eingabefelder? Oder nutzt ihr immer JavaScript-Alternativen wir jQuery UI oder Elemente von Frameworks wie Bootstrap?