Date picker (input type='date' polyfill, Calendar interface) - nschonni/wet-boew GitHub Wiki

français

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

Table of Contents Background Purpose Rationale Implementation Code example Examples= Development Known Issues Future Version History Related Pages References

Project Lead: Stephane Berube (@berubs)

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

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

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

<div>
  <label for="startdate">Start Date (<abbr title="Four digits year">YYYY</abbr>-<abbr title="Two digits month">MM</abbr>-<abbr title="Two digits day">DD</abbr>):</label>
  <input type="date" id="startdate" name="startdate" min="2008-01-01" max="2009-01-01" />
</div>
<div>
  <label for="enddate">End Date (<abbr title="Four digits year">YYYY</abbr>-<abbr title="Two digits month">MM</abbr>-<abbr title="Two digits day">DD</abbr>):</label>
  <input type="date" id="enddate" name="enddate" min="2009-01-01" max="2010-01-01" />
</div>

• Working example

• English example
• French example

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

The code for the date picker is located in several places within the source folder of WET:

• js/polyfills/datepicker.js - JavaScript code for the date picker polyfill
• js/sass/datepicker.scss - CSS for the date picker polyfill
• js/images/datepicker/ - images for the date picker polyfill
• js/dependencies/calendar.js - script file for the calendar library
• js/sass/calendar-base.scss - base CSS for the calendar library
• js/sass/calendar-theme.scss - theme CSS for the calendar library
• js/images/calendar/ - images for the calendar library

There are no known issues at this point in time.

Feel free to suggest feature/enhancements in the issue tracker.

• Datepicker.js
• Datepicker.scss
• Calendar.js
• Calendar-base.scss
• Calendar-theme.scss

• Events calendar (Calendar interface)

• HTML5 - Input element - Date state
• WAI-ARIA 1.0 Authoring Practices