Input type="date" polyfill (date picker)

Questions or comments?

Purpose

Provide an interface for selecting a date in a form. Implements the WAI-ARIA Date Picker design pattern.

Use when

This feature can be used on any page where selecting a date in a form is required.

Working example

How to implement

  1. Add a text input field for each date that will be requested. Each text input field must have the date type applied to it.
  2. Optional: Wrap the date format in the label with <span class="datepicker-format"></span> to hide it when the polyfill doesn't load (due to native support).
  3. Optional: Add a min attribute containing the earliest date that can be selected by the user.
  4. Optional: Add a max attribute containing the latest date that can be selected by the user.

Example Code

<div>
	<label for="startdate">Start Date<span class="datepicker-format"> (<abbr title="Four digits year, dash, two digits month, dash, two digits day">YYYY-MM-DD</abbr>)</span></label>
	<input type="date" id="startdate" name="startdate" min="2013-03-27" max="2013-05-07" />
</div>
<div>
	<label for="enddate">End Date<span class="datepicker-format"> (<abbr title="Four digits year, dash, two digits month, dash, two digits day">YYYY-MM-DD</abbr>)</span></label>
	<input type="date" id="enddate" name="enddate" min="2013-03-27" max="2016-05-07" />
</div>

Configuration options

Option Description How to configure Example
Hide Date Format Hide the date format when the polyfill doesn't load (due to native support) Wrap the date format in the label with:
<span class="datepicker-format"></span>
 
<label for="startdate">Start Date<span class="datepicker-format"> (<abbr title="Four digits year, dash, two digits month, dash, two digits day">YYYY-MM-DD</abbr>)</span></label>
Min Date The earliest date that can be selected by the user. Add a "min" attribute to the input field with a YYYY-MM-DD date as the value. 
<input type="date" id="startdate" name="startdate" min="2013-03-27" />
Max Date The latest date that can be selected by the user. Add a "max" attribute to the input field with a YYYY-MM-DD date as the value. 
<input type="date" id="startdate" name="startdate" max="2013-05-07" />

Events

Event Trigger What it does
wb-init.wb-date Triggered manually (e.g., $( "input[type=date]" ).trigger( "wb-init.wb-date" );). Used to manually initialize the input type="date" polyfill. Note: The input type="date" polyfill will be initialized automatically unless the input type="date" element is added after the page has already loaded.
wb-ready.wb-date (v4.0.5+) Triggered automatically after the input type="date" polyfill initializes. Note: This event will only be triggered if the polyfill is loaded. The polyfill will not load for browsers with native input type="date" support. Used to identify where the input type="date" polyfill initialized (target of the event) 
$( document ).on( "wb-ready.wb-date", "input[type=date]", function( event ) {
});
$( "input[type=date]" ).on( "wb-ready.wb-date", function( event ) {
});
wb-ready.wb (v4.0.5+) Triggered automatically when WET has finished loading and executing. Used to identify when all WET plugins and polyfills have finished loading and executing. 
$( document ).on( "wb-ready.wb", function( event ) {
});

Source code

Source code for the input type="date" polyfill (date picker)

Date modified: