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.
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
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.
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
date inputs that datalist can work for, it’s all the variety of date inputs as well as