HTML5 provides a much needed expansion of the Input element which allows developers to gain much more control over the information that is being provided by the user. In this article we’ll explore the new date and time related types, put together some examples, and see what browsers are currently supporting them.
In all the previous versions of HTML, developers have had no real control over the information that users were providing. It made no difference if a web form was asking for a date, a time or some combination of the two; it was always just a simple input element which rendered in the form of a text box. If you wanted to validate the information coming from the user you had the either do it on the client side with JavaScript or process it on the server side with a server-side technology like PHP or ASP.NET. What HTML5 has done with time and date input is to restrict the selections so that developers can always be assured that the data that is being sent is a valid date and/or time.
The Type Attribute
The behavior and presentation of the input element is controlled by the type attribute. Simply put, the job of the type attribute is to let the browser know what type of information is being expected for an input element. The browser then takes the type classification and decides how to present the input element (e.g. a date picker calendar, a text box for time with buttons, etc.) and how to validate, when applicable, the information that is provided by the user.
date, datetime, datetime-local, month, time, week types
date
This will likely be the most commonly used type of the date and time types. It allows the user to input or select a simple date. The value that is returned is the international standard with year-month-day, e.g. 2011-12-14.
<input type=”date” name=”my_date” />
datetime
This type is slightly more complicated as it includes a date and a time. The date is in the international standard format of year-month-day, e.g. 2011-12-14. The time is in 24 hour format and is UTC (Coordinated Universal Time). A returned value for this type would look something like 2011-12-14T14:45Z. The T indicates the break between date and time in the string and the Z indicates the time value portion of the string is UTC.
<input type=”datetime” name=”my_datetime” />
datetime-local
This type is virtually identical to datetime except for the value that is returned and the time standard. The date is in the international standard format of year-month-day, e.g. 2011-12-14. The time is in 24 hour format and is local time. A returned value for this type would look something like 2011-12-14T14:45. The T indicates the break between date and time in the string and notice there is no Z on the end like in datetime. The absence of the Z or any other indicator on the end lets you know it’s local time.
<input type=”datetime-local” name=”my_datetime-local” />
month
This type is pretty basic, allowing the user to select a year and month. The value that is returned is just like date with the international format of year-month. A returned value for this type would look something like 2011-12.
<input type=”month” name=”my_month” />
time
This one is the simplest of the date/time related types, allowing the user to select a time on a 24 hour clock, no AM or PM. The value returned is hours:minutes which will look something like 14:30.
<input type=”time” name=”my_time” />
week
The week type is a bit of an odd one, especially in the value that is returned. Its purpose is to allow the user to select a year and week with the week being a value from 1 to 52. The value that is returned is a bit cryptic and will likely require developers to parse out the value in order to break the information down into useful components. The value returned is formatted yearWweek with the W being a delimiter between the year and week number. An example of this would look something like 2011W48.
<input type=”week” name=”my_week” />
Additional Attributes
The types listed above also have some specialized input attributes that can be used to restrict the range of dates or times that the user can choose. This is done through the use of the min, max and step attributes for the input element. An explanation of each of these attributes is given below along with an example using the date type.
Min
This attribute is used to set a minimum limit on the user’s input.
Max
This attribute is used to set a maximum limit on the user’s input.
Step
This attribute establishes the legal interval for input by the user. For example, setting the step attribute value to 900 when the type value is set to time means that the only valid input times will be in 15 minute increments (900 seconds).
Tip: Be careful when using the step attribute with any of the date/time types as the attribute is very particular with regards to what values it will recognize and how the values are formatted. As you can see in the time type illustration discussed above, the time interval is listed in seconds and not minutes as you might expect.
<input type=”date” name=”my_date” min=”2010-01-01” max=”2012-01-01” step=”7” />
At this time there are only 2 browsers that support these types, Opera and Safari, and the two implementations are very different between them. Opera is by far the more polished of the two with a full date picker including a calendar interface for the date related types. Safari’s implementation is more like an enhanced text box with minimal functionality. Safari is also not as intuitive and user-friendly. For example, where Opera uses the calendar interface for the week type by highlighting each week for any date that is clicked, Safari simply allows the user to increment or decrement or directly enter the week as a value in a text box like 2011W50 or 2012W1 (week 1 of the year 2012). Internet Explorer and Firefox have yet to implement any of these new types. Google Chrome 10.0 is reported to support the date related types, however, in the Google Chrome release that I tested, none of the date/time related types were implemented.
Date and Time Made Easier … Some Day
It’s easy to see how the new date and time related types will make web development much easier in the not too distant future. In the short term, though, we must unfortunately keep using traditional methods as only Opera and Safari have made any effort to include these new types. The waiting does not restrict developers from starting to play the new types now, however. If you use a type for your input elements that a browser doesn’t recognize it will simply present the standard text box.
It will be interesting to see how each of these new types gets implemented by each of the different browsers. While the guidelines on what each type’s purpose and generated values are, the interfaces and implementations within the individual browsers are open to some interpretation. A great example of this can be seen in how differently Opera and Safari handle the new date and time types. It will be interesting to see how this all pans out as Firefox, Internet Explorer and Google Chrome begin to catch up with Safari and especially Opera as Opera seems to be setting the standard at this point. If you are going to test out the new date and time types I would certainly recommend that you try them out on Opera first. Happy coding!
Browsers used for testing: Firefox 8.0.1, Chrome 16.0.912.63, Internet Explorer 9.0.8112.16421, Opera 11.60.1185 and Safari 5.1.1.