Date picker

This feature dynamically generates a calendar interface for selecting a date in a form.

Overview

Project lead: Stéphane Bérubé (@berubs)

Purpose

The purpose of this feature is to provide an interface for selecting a date in a form.

Benefits

  • In cases where a browser doesn't support the attribute and element, the polyfill is automatically loaded.
  • This polyfill ensures that the auto-complete functionality is added to the text input field and the necessary information is exposed to assistive technologies by adding WAI-ARIA.

Rationale

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

Implementation

  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: Change the value of max to the latest date that can be selected by the user.
  4. Optional: Change the value of min to the earliest 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>

Working example

Examples

Development

The date picker is dependent upon native support for the HTML5 input type="date", the date picker polyfill and the calendar library.

Known issues

There are no known issues at this point in time.

Version history

Related pages

References