HTML and CSS Reference
Input Date Picker Custom Component
In this section we will implement the HTML5 date picker input element as a composite component. The purpose
of the date picker input is to allow the user to select a date using the native date picker built into the browser. Not all
browsers support the date picker, so like the color picker we will provide a fallback, this time using JQuery-UI. Like the
color input component, the date input component also supports the change event that we will catch and broadcast to
Ajax-enable the component.
Table 7-3 contains a list of attributes supported by the date input element. We will implement all the attributes in
our composite component. Examples of how the attributes are used can be found in Listing 7-13.
Table 7-3. Attributes Supported by the Date Input Element
String (reference to a datalist)
Date string (year-month number-day number, e.g. 1970-01-10 is the 10 th January 1970)
Date string (latest possible date that the user can select)
Date string (earliest possible date that the user can select)
Integer (number of days to change at every step)
Listing 7-13. Examples of Using HTML5 Date Input
<label for="without-value">Date (without a preset date): </label>
<input id="withouth-value" type="date" value="" />
<label for="with-value">Date (with a preset date): </label>
<input id="with-value" type="date" value="2013-05-03" step="10" />
<label for="with-constraints">Date (with a constraints): </label>
<input id="with-constraints" type="date" value="2013-05-03"
min="2013-05-01" max="2013-05-31" />
<label for="readonly">Date (readonly): </label>
<input id="readonly" type="date" value="2013-05-03"