In one of my advent calender post, I show you, how you can set a range for the date input type (not yet translated). In a comment, someone reminded me, that this new input type is not yet supported by Firefox. It might be available in future version (currently it can be enabled by setting a flag in Firefox 56+), but until then, we should implement a fallback.

Checking for browser support

I still like the native date input fields a lot better than the JavaScript based datepickers, especially on mobile devices. To check if a browser supports those new input fields, you can use a very simple check:

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

We first select the date fields on the page with a specific CSS selector and then we check, if the type of the first field is text rather than date, what is should be, if the browser supports this field type. If this is true, then we use the jQuery datepicker on those fields.

Load the datepicker files

In order to use the datepicker, you have to load it’s JavaScript files. As those files are bundled with WordPress, you can simple enqueue them:

wp_enqueue_script( 'jquery-ui-datepicker' );

But this would only add the JavaScript files. The styles are not bundled with WordPress. You theme might have them. If not, you can use the “jQuery Download Builder” to get the necessary files or you could enqueue them from a public CDN like the “Google Hosted Libraries“.

Conclusion

In my opinion, it’s always best, to use the native browser features for UI elements like date picker, color picker or drop downs. If you cannot use them on all devices, just implement a fallback for those few devices. Unless there are really good reasons to have your own UI elements (like a consistent styles guide).

How about you? Do you use those new input types? Or do you always use JavaScript alternatives like jQuery UI or elements from frameworks like Bootstrap?