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:
<input type="date">I’ve seen variations on this before, like when you use a week input instead of date:
<input type="week">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.
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:
“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.
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"
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。