A Date and time field can be easily found in many web forms. Typical applications are like ticket booking, appointment booking, ordering pizza and etc.

The most commonly used solution for date input is to use Javascript date picker. Don't believe me? Just google "Javascript date picker". Most of the date picker use a calendar to let user choose a date and fill the date into a textbox.

As of writing, the only web browser completely support date time input is Opera (v11) and Google Chrome (v20). In HTML5, it is the job of web browser to ensure user can only enter a valid date time string into the input textbox.

BrowsersDate Time Support
IE 9 Beta
Firefox 13
Safari 5
Chrome 20
Opera 11

If you happen to have Opera version 11 or Google Chrome 20 (or later version of course) installed in your computer, please feel free to check it out.

 
 

If you do not have the web browser that support it, the picture below shows you how it looks like.

Web browser native date picker

With HTML5 support, web designer no longer needs to download fancy Javascript control for basic date input. Exactly what you need to do is just <input type="date"/>

<label for="meeting">Meeting Date : </label><input id="meeting" type="date" value="2011-01-13"/>

Once again HTML5 has made our life easier! Furthermore, you are not just getting "Date" input, there are half a dozen of "Date Time" related inputs that you can pick and use! Of course, the ball is now in the court of the web browser companies as they decide when to implement this standard.

1. Date (<input type="date"/>)

Apparently this is browser native date picker. You can only pick a specific date from the calendar.

Opera Date Picker

2. Week (<input type="week"/>)

Instead of picking a date, you can pick a week too. Please notice the Week number on the left of the calendar.

Opera Week Picker

3. Month (<input type="month"/>)

You can even have a month picker, here the calendar that allows you to choose a month in a year.

Opera Month Picker

4. Time (<input type="time"/>)

This is nothing special, a time picker for time input.

Opera Time Picker

5. Date and Time (<input type="datetime"/>)

You can choose date and time with time zone. Input value is represented in UTC time.

Opera Date Time Picker (UTC)

6. Local Date and Time (<input type="datetime-local"/>)

In compared to UTC time, you can have input date time value represents local time too.

Opera Local Date Time Picker

Let's look into the related attributes that we possibly use.

Attributes Descriptions
value Value is the default value of the input box when a page is first loaded. This is a common attribute for <input> element regardless which type you are using.
min Minimum Date or time
max Maximum Date or time
step Step scale factor. Different type of input has its own default "step" value.
  • Date - default is 1 day
  • Week - default is 1 week
  • Month - default is 1 month
  • Time - default is 1 minute
  • DateTime - default is 1 minute
  • Local DateTime - default is also 1 minute