Date and time in forms according to HTML5
Applications that require a date entering (timetables, booking) simplify this task by using mostly JavaScript calendars. HTML5 standard propose the whole family of new form elements of type dateTime. Attributes allow to set the range of permitted date or time, step of seconds and the requirement to fill in the input field. Whether the date and time are correct, native validation is applied even when javascript is turned off.
For testing intent, miniform with all variants of the input element for the date and time is prepared. Testing a new form elements has meaning in browsers Chrome14, Opera11 only. Safari5 for Windows lets you set the date and time values, but does not perform native validation. Firefox and IE browsers process all tags of the family datetime as plain text, so you can type in anything. Native validation is performed when the form is submitted.
Family of datetime elements is disabled in Chrome16 and these elements work as type="text". Following example is not working in that browser.
Standard ISO 8601 unifies very different ways how to write the date and time. Utilization of this new format in form elements is quite a fundamental change, but this standardized format is quite understandable and should not make the problem even ordinary users. Very diverse national conventions for the date and time notation can be found at Wikipedia. Whether this standardized format will be accepted is the question.
Chrome and Safari browsers display all types of form elements in the same way. Setting values can be done by using the spinner control, using the cursor keys up / down, or direct typing into the input field. The same goes for setting the time in Opera browser. Date in Opera is set in different way: when an element receives focus (by clicking on it), the widget is openned for the date selection. This basically prevent to type in any fault date by the keyboard and selected date is always correct.
On the right is screenshot of the date picker widget, calendar which allow to select the date in the Opera browser. It is full localized and the names of months and days of the week depends on the language browser (Menu > Settings > Preferences > Language).
There is no problem to control the calendar with help of mouse, however keyboard control is not perfect. Limits set by the min, max attributes are active in the calendar and the date that exceeds preset limits can not be selected.
The advantage is simple lookup the date with respect to day of the week. You do not need to have a paper calendar at hand when planning vacation, accommodation, or search the timetable. After all, it works the same way like most current solution for simulation of the form element date.
It is a pity that there is no <calendar> tag, in standard HTML5 specification. That would be very usefull, not only for form elements.
Atributes of form elements datetime
Great family of datetime form elements consists of 6 members, differed with the type attribute. In principle, two elements are important: type="date" for setting the date and type="time" for setting the time. To set a common date and time in one form element are suitable type="datetime" and type="datetime-local", the first is to set the time according to UTC, universal time, the second is suitable for setting the current, local time. Element type="month" allow to select the year and month, the element type="week" is useful to pick the calendar week.
Attributes min and max are used to set the limits of permited values. Attribute value is worthwile, when prefilled form field is suitable. The content of the input field then can be changed according to the need. For example when editing an existing record from the database. The format of string value have to match the standard ISO 8601 and the element type. Attribute step is applied to the time and affects the visibility of seconds. The default value is 60 (seconds) and this value hides a view of seconds.
Attribute required is used when the value has to be filled (the element must not be left blank). The native validation disable submitting the form with unfilled such form field.
The appearance of form elements datetime
On the right are screenshots of a example form above in Chrome and Opera browsers. Safari for Windows displays that form in the same way as Chrome. The appearance probably is not definitive. Firefox and IE can not work with these elements and the form consist of current textboxes.
All elements in the form are set to uniform size by width and height CSS properties. As you can see in screenshot, Opera has minor issue with the width of the elements. In addition, property margin is unified by setting margin: 0;. Default margin in Chrome is 2px, while in Opera is 0. If you set the background color property, the look of elements are switched into a classic view, as is known from win2000.
The fundamental difference is the appearance of datetime elements. Opera displays this element as an element composed of two parts, one for the date, the other part for the time. In HTML code, however, is declared only one datetime element. Opera displays the text "UTC" as part of an element (an indication that the time correspond to the prime meridian). This notice should be part of corresponding label.
All form elements of datetime family submit values according to ISO 8601. The format of the submitted value is visible in input field, except for Opera where type="datetime" and type="datetime-local" display selected value as separated values in transparent way.
When stepping the time through the midnight in type="datetime" element, Chrome corrects the date, while Opera stop stepping at midnight and date have to be eventually corrected in the date part of element.
Notes
If you feel a bit disappointed by HTML5 family of datetime form elements, you are not alone. I suppose that many Web application designers stay at the current best calendar scripts. On the one hand we try to make the web simple and readable, on the other hand recomended datetime format, which add the letters "T" and "Z", make the value hard to read. How many users will be satisfied?
Format of datetime is not only question for input elements, but also question for output format. Will all date format in HTML have to be changed according to standard, or shall we to use standard format for input and national format for output?
My personal impression of the datetime family of form elements is brainless implementation of ISO 8601 standard. For each standardized data format is recommended different element type. Often less is more. In practice, it would be enough just two elements: type="date" and type="time". Placing these elements next to each other can substitute datetime element, similar to that seen in Opera. Such a solution also simplifies the styling of elements.
updated 2011-11-07