Utilizing Date and Time Input Fields
Problem
You want to provide a user with a form to specify a date and/or time – for example, when scheduling an appointment.Solution
HTML 5 provides a number of new input types to assist in date and time entry.
This first solution uses the input element with HTML5 type value of datetime to display both a date-picker widget and time spinner control in combination as shown in Figure3-8.
<form>
<p><label>Appointment Date and Time <input type="datetime" name="dateAndTime"></label></p>
Figure 3-7. Ampersand and TLD are easily in reach on iPad keyboard
<p><button type="submit">Submit</button></p>
</form>
To present the date and time input fields separately, use separate input fields with the HTML5 type values date and time as shown in Figure 3-9 and Figure 3-10.
<form>
<fieldset>
<legend>Appointment Request</legend>
<p><label>Date <input type="date" name="date"></label></p>
<p><label>Time <input type="time" name="time"></label></p>
</fieldset>
<p><button type="submit">Submit</button></p>
</form>
You want to provide a user with a form to specify a date and/or time – for example, when scheduling an appointment.Solution
HTML 5 provides a number of new input types to assist in date and time entry.
This first solution uses the input element with HTML5 type value of datetime to display both a date-picker widget and time spinner control in combination as shown in Figure3-8.
<form>
<p><label>Appointment Date and Time <input type="datetime" name="dateAndTime"></label></p>
Figure 3-7. Ampersand and TLD are easily in reach on iPad keyboard
<p><button type="submit">Submit</button></p>
</form>
To present the date and time input fields separately, use separate input fields with the HTML5 type values date and time as shown in Figure 3-9 and Figure 3-10.
<form>
<fieldset>
<legend>Appointment Request</legend>
<p><label>Date <input type="date" name="date"></label></p>
<p><label>Time <input type="time" name="time"></label></p>
</fieldset>
<p><button type="submit">Submit</button></p>
</form>
Discussion
The datetime, date and time family of input types, which also includes month, week, and datetime-local, are excellent proof that new features in HTML 5 are based on what web designers and developers have been doing for years with various JavaScript libraries and other solutions.
Figure 3-8. The datetime input field renders a date-picker widget and time spinner control in Opera 11.50.
Figure 3-9. Date and time input fields in Opera 11.
Opera has been the leader in generating date and time controls – rendering a calendarbased date picker control for date and a time spinner control for time – and many expect other browsers to eventually follow their lead.
Webkit-based desktop browsers recently introduced support for the input types, using spinners for both. User agents that do not support these input types revert to a text input field.
For a look at the browser support for date and time input types, see Table 3-3.
Table 3-3. Date and time input types support.
To deliver a more consistent cross-browser experience, see section 4.13, Making HTML5 work in older browsers.
Like all other form inputs, you can specify a value to be displayed when the page is rendered.
The value for the date input type must be a valid date string, such as 2010-12-31 that represents December 31, 2010.
The value for the time input type must be a valid time string, such as 23:59:59 that represents 11:59 PM, one second before midnight.
Meanwhile, the value for the datetime input type must be a valid global date and time string, such as 2010-12-31T23:59:59Z that represents one second before midnight UTC on December 31, 2010.
Figure 3-10. Date and time input fields in Chrome 12.
Additional Features
Two new input element attributes, the min and max attributes, can limit the range of dates and times that users can select. This is useful in cases where you don’t want users to select appointment dates or times in the past or select birthdates in the future as
shown in Figure 3-11.
<form>
<fieldset>
<legend>Appointment Request</legend>
<p><label>Date <input type="date" name="date" min="2011-03-15" max="2012-03-14"></label></p>
<p><label>Time <input type="time" name="time" min="08:00" max="18:00"></label></p>
</fieldset>
<p><button type="submit">Submit</button></p>
</form>
Figure 3-8. The datetime input field renders a date-picker widget and time spinner control in Opera 11.50.
Figure 3-9. Date and time input fields in Opera 11.
Opera has been the leader in generating date and time controls – rendering a calendarbased date picker control for date and a time spinner control for time – and many expect other browsers to eventually follow their lead.
Webkit-based desktop browsers recently introduced support for the input types, using spinners for both. User agents that do not support these input types revert to a text input field.
For a look at the browser support for date and time input types, see Table 3-3.
Table 3-3. Date and time input types support.
To deliver a more consistent cross-browser experience, see section 4.13, Making HTML5 work in older browsers.
Like all other form inputs, you can specify a value to be displayed when the page is rendered.
The value for the date input type must be a valid date string, such as 2010-12-31 that represents December 31, 2010.
The value for the time input type must be a valid time string, such as 23:59:59 that represents 11:59 PM, one second before midnight.
Meanwhile, the value for the datetime input type must be a valid global date and time string, such as 2010-12-31T23:59:59Z that represents one second before midnight UTC on December 31, 2010.
Figure 3-10. Date and time input fields in Chrome 12.
Additional Features
Two new input element attributes, the min and max attributes, can limit the range of dates and times that users can select. This is useful in cases where you don’t want users to select appointment dates or times in the past or select birthdates in the future as
shown in Figure 3-11.
<form>
<fieldset>
<legend>Appointment Request</legend>
<p><label>Date <input type="date" name="date" min="2011-03-15" max="2012-03-14"></label></p>
<p><label>Time <input type="time" name="time" min="08:00" max="18:00"></label></p>
</fieldset>
<p><button type="submit">Submit</button></p>
</form>
No comments:
Post a Comment