HTML5 Coding Essentials and Best Practices

"date"

For years, date and time pickers in HTML forms made Web developers rely heavily on JavaScript based widgets. The process is simpler in HTML5, which provides a special control to handle this specific kind of data natively.

Below are a few screenshots of the HTML5 date picker on several mobile devices. Note that the native date pickers of the operating systems are used:

The problem is different on a desktop. While it's great to have native support for a date picker, Web developers would sometimes prefer 100% control over the look and feel of the date picker widget. For this purpose, the solution undoubtedly lies with the new Web Components (a way to make custom reusable widgets in HTML/CSS/JS), to be detailed in the W3Cx HTML5 Apps and Games course

With Firefox, it shows this date picker widget:

On non-supported browsers, it defaults to an <input type="text"> input field.

Typical use of <input type="date">

Default use

The default usage is something like:

<label for="birthday">Choose birthday party date: </label>

Most of the time you will add other attributes to give some restrictions (choose a date in the past, in the future, only on a Saturday, etc.).

Restrict choice to an interval of dates: attributes min, max and value

The <input type="date"> comes with several useful attributes. In particular the value, min and max attributes are used to propose a default date, a min and a max date, or for defining an interval of acceptable values.

Try it online on JSBin if you want to tweak the source code:

Source code:

...

<input type="date"

id="birthdayParty"

value="2015-06-20"

min="2015-06-20"

max="2015-06-30">

...

Choosing one day in a given week, etc. with the step: attribute

Using the value attribute for setting a date, and using step=7 for example, will make acceptable only the day of the week that corresponds to the value's day (e.g.: only Mondays). Using step=2 will make acceptable only every other day, etc.

Example: we want to celebrate birthday parties only on Saturdays, check this on JSBin! (screenshot from Chrome).

Extract from source code:

<input type="date"

id="birthdayParty"

value="2015-06-20"

min="2015-06-20"

max="2015-06-30"

step="7">

Combining with the <datalist> element to restrict the choice of possible values

Online example at JSBin (screenshot from Chrome).

Extract from source code:

<input type="date"

id="birthdayParty"

list="birthdayPartyPossibleDates"

value="2015-06-20">

</datalist>

The list attribute of the input element must match the id attribute of the datalist element.

If you use the min, max, or step attributes with a list attribute, it may filter the restricted list even more. Check this example on JSBin (tested with Google Chrome), that has a restricted list of three elements, one of which is filtered because it is not in in the min/max range.

Responding to date changes, trying date/time and other variants

Listening to the input event

Here is an interactive example at JSBin where you can change the type of date/time chooser. It also shows how to listen to the input event when a date/time is chosen.

Source code:

<!DOCTYPE html>

<body>

Testing the new date input field.<p>

Choose a date/time : <input type="date" id="date" /></p>

<p>

You picked: <span id="pickedDate"></span>

</p>

After you have tried the first example, change the value of the "type" attribute to:

<ul>

<li>datetime</li>

<li>datetime-local</li>

<li>month</li>

</ul>

And see the result.

var field = document.querySelector("#date");

var result = document.querySelector("#pickedDate");

field.oninput = function(evt) {

var date = this.value;

pickedDate.innerHTML = "<b>"+date+"</b>";

}

</script>

</body>

</html>

Lines 20-26 show how we can detect a date change using JavaScript.

Checking if the chosen date is in the past or in the future using the valueAsDate property

The object returned to the input event handler has a useful property named valueAsDate. This is a JavaScript date object that can be compared to other JavaScript date objects, in particular to the date of the day we can get with var date = new Date();

The following example on CodePen shows how to ascertain whether a date is in the past or in the future:

While if we enter a date in the future:

Extract from source code:

<body>

<label for="birthDate">Enter your birth date: </label><p>

<p>

You picked: <span id="pickedDate"></span><p>

</p>

var field = document.querySelector("#birthDate");

var result = document.querySelector("#pickedDate");

var pastFuture = document.querySelector("#pastFuture");

field.oninput = function(evt) {

var date = this.value;

pickedDate.innerHTML = "<b>"+date+"</b>";

if(date.valueAsDate <= new Date()) {

pastFuture.style.color = 'green';

pastFuture.innerHTML = "<b>Date in the past, ok!</b>"

} else {

pastFuture.style.color = 'red';

pastFuture.innerHTML = "<b>Date in the future, you're not even born!</b>"

}

</script>

</body>

Lines 17-23 show how we can compare the date picked in the calendar widget with the current date. Note that we can compare any given dates using JavaScript. To check that the chosen date is before 2000 we would do this:

if(this.valueAsDate <= new Date(2000,1,1)) {

...

}

<input type="datetime">, "week", "month", "datetime-local", etc.

The HTML5 specification indicates that we can use <input type="date"> and <input type="time"> while for some years (before the specification became a frozen standard in October 2014), other variants were also present, such as type=datetime, datetime-local, month and week.

Here is an interactive example at JSBin where you can change the type of date chooser and try all the different possible values for the type attribute of date pickers.

Some screenshots from Opera desktops and Safari IOS:

<input type="time">:

<input type="week">:

<input type="month">:

Page updated

Google Sites

Report abuse