WordPress Component Library
10up Engineering

Datepicker Form

The datepicker component is based off the popular plugin Pikaday, it was chosen because it passed accessibility, performance, and quality tests. Therefore the pikaday.js file and pikaday.css file is necessary to use this component out of the box before customizing for your own use. Pikaday is also generally flexible enough with a strong API to accomplish most goals of any datepicker you might encounter.

HTML

<section class="datepicker">
	<label for="datepicker">Date:</label>
	<input type="text" id="js-datepicker">
</section> <!-- //.datepicker -->

JS Usage | Plugin

( function() {

	// Enable strict mode
	'use strict';

	var datepicker = document.getElementById( 'js-datepicker' );
	if ( ! datepicker ) {
		return;
	}

	var picker = new Pikaday( {
		field: datepicker,
		firstDay: 1,
		minDate: new Date(),
		maxDate: new Date( 2020, 12, 31 ),
		yearRange: [ 2000, 2020 ]
	} );

} )();

Browser Compatibility

Feature Chrome Firefox Internet Explorer Safari
Basic Support Latest Latest 9+ 5.1+

Resources