HTML5 Form Date Attribute

HTML5, Web Design

Getting corporate America to make the move to HTML5 seemed to take longer than any other transition we’ve seen in the past. In part I’m sure due to the long development process. From first working draft in January of 2008 to stable recommendation in October of 2014, that’s almost 7 years.

There are many compelling reasons to make the change but the one we will focus on today deals with forms and an easier way of inputting a date.

Early on the primary means of capturing a date was supplying a simple textbox and a visual example of the formatting.

It was simple but had to have validation to guarantee its formatting.

Another approach would have been using select menus. A lot more code, both to build the lists and to concatenate the values on the server.

Another option would be to use a JavaScript library like jQuery and plug in their Datepicker UI component.

It would all be so much easier if date were just on option for a form element. Well it is in HTML5!

That simple input type results in a UI structure that looks like the Datepicker from jQuery.

This screen capture is using Chrome but it looks exactly the same in Opera. If you use Edge on Windows 10 it looks like this.

On an iPhone using Chrome within iOS 10 it looks like this.

That’s all the good news, now for the downside. It doesn’t work in any version of IE, Firefox or Safari and doesn’t look promising for the last two in the foreseeable future.

But don’t let that stop you. Remember, if the browser doesn’t recognize the input type it defaults to a textbox, our old standard method. The benefits to the remaining users and all those on mobile devices are all in the plus column.