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 list="days" type="date">
<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.

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!

type="range"

type="color"