HTML5: Datalists for Different Input Types

CSS-Tricks

Datalists for Different Input Types

I saw an HTML5 date input the other day, which had the dropdown arrow on the right, which I've grown accustom to clicking to reveal a calendar datepicker in which to choose a date.

Typically, that looks like this:

I've seen variations on this before, like when you use a week input instead of date:

But I hadn't seen this before:

Turns out that's what you get when you apply a <datalist> to an input of that type! Who knew!

The format is like this:

<input type="date" list="days">
<datalist id="days">
  <option label="Chris' Birthday">1980-08-26</option>
  <option label="Apollo 11 Moon Landing">1969-07-20</option>
  <option label="DDay">1944-06-06</option>
</datalist>

The values for each of the options just need to be valid values for the input, otherwise they just don't show up.

Browser Support

As far as I understand it, the spec doesn't dictate any particular UI requirements for HTML5 input types. If a browser wants to build a datepicker thingy, great, but not doing it doesn't violate the spec. Thus, this additional UI nicety also isn't required. I just mention that because lack of "support" here doesn't indicate a browser is doing a bad job.

These fancy datalist inputs appear to largely be a Blink thing.

A quick check around the latest version of browsers, just testing input type="date" with a datalist:

Chrome 38 = works

Opera 23 = works

Safari 8.0 = doesn't support input type="date"

Firefox 32 = doesn't support input type="date"

Internet Explorer 11 = doesn't support input type="date"

iOS 8.1 = date works / datalist doesn't (see screenshot)

Android 5 = works (see screenshot)

Opera Mobile 11.5 = date works / datalist doesn't

"Support" again meaning "doesn't do anything special for" - but falls back to a useable text input.

iOS 8.1 - you get the date controls but nothing special for the datalist.

Here's the rub with features like this. If it's just a little nicety you can provide, but not crucial, just use it and think of it as progressive enhancement. If it's totally vital that all users to your site need UI for choosing recommended options and you support browsers that don't support this, you'll need either a polyfill or a custom solution.

Other Types

Date doesn't get to have all the fun! While putting this together, I ran across Eiji Kitamura's comprehensive test page for all this. It's not just text and date inputs that datalist can work for, it's all the variety of date inputs as well as color and range!