- Skip to main content
- Skip to "About this site"

# 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

- English example
- French 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:
  2014-08-06