site logo

Date and time in forms according to HTML5

To enter correct date into the form with regard to format is not a trivial matter. Boths the user and the server have to interpret the entered string as the same day, regardless of national conventions. Applications that require to enter date (timetables, accommodation order) emloy for this task JavaScript calendars. HTML5 standard propose new form elements for date and time to simplify that job.

Firefox and IE browsers are processing all elements of the dateTime family as plain text and allow to enter (and submit) any text. Browsers Opera, Safari and Chrome identify these elements, but handle them a bit differently.

For testing purposes of these elements small form containing all types of the input elements for the date and time, is prepared. On the left you can see listing of used attributes.

atribute applied element type form
required date
  datetime
  datetime-local
min="2007-09" month
max="2017-W20" week
step="5" time
appearance of calendar elements

The look of elements dateTime

On the right are screenshots of the sample form above. FF and IE can not work with these elements and therefore are not included in the screenshots. The final look may be different.

For all elements the uniform width and height is set by help of CSS. In addition, property margin: 0; is set, because default value of this property is 2px in Chrome, and 0px in Opera. When the background color property is set, the look of elements will go into a classic look, as is known from win2000.

Opera has some issues with setting the width of a single element, the unification of padding (week) and the default text alignment (date). Datetime elements are composed of two parts, one for date, another for the time, but in HTML is declared only one element. In addition, Opera displays text "UTC" as part of an element (indication that the time corresponds to the prime meridian) even though this warning might be included in corresponding label.

Safari (and older Chrome) display all the elements in the same way. Part of the element is spinner for setting the value. All dimensions are set according to the W3C box model. The look differs by the format of the displayed value only.

In Chrome 16 all elements for date and time were disabled, keeping type="text" element behavior. Chrome 20 introduced a new element of date, Chrome 23 add element time, Chrome 25 other elements then.

Format of values dateTime

ISO 8601 unify the very different ways of formatting the date and time, details can be found at Wikipeda. Samples of ISO format, can be seen the screenshot of Safari browser. Regardless of the visible data format shown in the elements, the ISO format is used to submit the data to the server as part of the form. Also, the javascript functions to get the value of form element returns the data in the ISO format.

Chrome displays the date value according to the national conventions, based on the language of operating system, but submits data always in ISO format. The user can see the date value in friendly format, but the server always receives data in a standard format. It makes easier to process data on server. Default text on buttons submit, or file are also localized.

Opera and Safari displays and submits the date in ISO format. This could be the ideal situation, the same format applied to both input and output date, uniformly for the whole world. Unfortunately such a format is not convenient to read, a typical user would probably be confused. Indeed, even an attempt to unify the world to use the same units for temperature, weights and dimensions failed.

Control of elements dateTime

localized calendar widget in Opera

On the left is a screenshot of calendar (date picker widget) to pick the date in the Opera browser. It is localized and the month and day of the week depends on the browser language (Menu> Settings> Settings> Language). Similar, not identical, calendar is also available in Chrome browser.

The Opera browser sets the date value only by using the calendar widget. To type the date by the keyboard is not possible, therefore an invalid date can not be entered, so there is no need for validation. Time data can be set by using the spinner (part of the element), or by use the numeric keypad or by pressing the up and down keys. Thus it is possible to type (and submit) invalid time.

There is no problem to control the calendar with help of mouse, however control by keyboard is not perfect. Limits set by the min, max attributes are active in the calendar and the date that exceeds the limits can not be selected.

Safari and older Chrome apply for setting the dateTime values spinner control. Also direct entry from the keyboard is possible. No indication of the day of week is supported.

Chrome introduces date picker widget similar to Opera (for date element). Click on the arrow pops up a calendar, click on the text part of the element allows direct entry from the keyboard, or step date with help of spinner is possible. When invalid date is typed, the value is automatically fixed to valid date.

Pop-up calendar is preferable. 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.

design of date element

Evolution of design, format, look and control of element date is shown in the screenshot on the left. It is not clear how the final version of this element will look like, but it is clear that Chrome explores the optimal model. Chrome 27 add to some elements of date family inputs cross sign to delete the selected value. Note that IE and Firefox browsers do not support this element yet.

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. 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.

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?

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.

Hopefully browser developers will eventually take some compromise solution on the same appearance, formatting and control of these elements. By that time these elements are not ready for current use.

updated 2013-02-25