Date picker (input type='date' polyfill, Calendar interface) - nschonni/wet-boew GitHub Wiki
This feature dynamically generates a calendar interface for selecting a date in a form.
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.
- Add a text input field for each date that will be requested. Each text input field must have the "date" type applied to it.
- Optional: Change the value of max to the latest date that can be selected by the user
- 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>
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.