Input type="date" polyfill (date picker)

Looking for WET v3.1?

WET v4.0 is now the current version. There is a new location for the current page in WET v3.1.

Questions or comments?

Purpose

Provide an interface for selecting a date in a form.

Use when

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

Working example

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
create.wb-cal Before the calendar interface becomes visible. Creates the calendar interface.
setFocus.wb-cal After the calendar interface is displayed. Sets focus on the date in the input field, if defined.
hideGoToFrm.wb-cal Before the calendar interface is hidden. Hides the "Go To" form in the calendar interface.

Source code

Source code

Date modified: