Basic JSF2 HTML5 Components - JSF and HTML5 - page 174

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

Attribute Data type

Autocomplete Boolean

List

String (reference to a datalist)

Value Date string (year-month number-day number, e.g. 1970-01-10 is the 10 th January 1970)

Max Date string (latest possible date that the user can select)

Min Date string (earliest possible date that the user can select)

Readonly Boolean

Required

Boolean

Step Integer (number of days to change at every step)

Listing 7-13. Examples of Using HTML5 Date Input
<section>
<label for="without-value">Date (without a preset date): </label>
<input id="withouth-value" type="date" value="" />
</section>

<section>
<label for="with-value">Date (with a preset date): </label>
<input id="with-value" type="date" value="2013-05-03" step="10" />
</section>

<section>
<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" />
</section>

<section>
<label for="readonly">Date (readonly): </label>
<input id="readonly" type="date" value="2013-05-03"
readonly />
</section>