Show a browser picker for date, time, color, and files

François Beaufort
François Beaufort
GitHub

For a long time, you had to resort to custom widget libraries or hacks to show a date picker. The web platform now ships with the HTMLInputElement showPicker() method, a canonical way to show a browser picker not only for dates, but also time, color, and files.

Background

A frequent request we hear from web developers is:

How do I programmatically
show a picker for controls like date?

Stack Overflow

Current answers are not great; they rely on external libraries, CSS hacks, or specific browser behaviors like simulating a user interaction with click().

I'm happy to share that those days will be over soon as the web platform is introducing a canonical way to show a browser picker for <input> elements with these types: "date", "month", "week", "time", "datetime-local", "color", and "file". It will also work for <input> elements with suggestions powered by <datalist> or "autocomplete" which we'll cover as well in this article.

Screenshots of browser pickers
Browser date pickers in Chrome desktop, Chrome mobile, Safari desktop, Safari mobile, and Firefox desktop (July 2021).

How to show a picker

Calling showPicker() on an <input> element shows a browser picker to the user. It must be called in response to a user gesture such as a touch gesture or mouse click; otherwise it will fail with a NotAllowedError exception. For security reasons, it will throw a SecurityError exception when it's called in a cross-origin iframe.

A browser picker is shown when the <input> element is one of these types: "date", "month", "week", "time", "datetime-local", "color", or "file".

The example below shows you how to open a browser date picker.

<input type="date">
<button>Show the date picker</button>

<script>
  const button = document.querySelector("button");
  const dateInput = document.querySelector("input");

  button.addEventListener("click", () => {
    try {
      dateInput.showPicker();
      // A date picker is shown.
    } catch (error) {
      // Use external library when this fails.
    }
  });
</script>

A browser picker can also be prepopulated with items from <datalist> or "autocomplete".

The example below shows you how to open a browser picker with <datalist>.

<datalist id="ice-cream-flavors">
  <option value="Chocolate"> </option>
  <option value="Coconut"> </option>
  <option value="Mint"> </option>
  <option value="Strawberry"> </option>
  <option value="Vanilla"> </option>
</datalist>
<input type="text" list="ice-cream-flavors">
<button>Show the suggestions</button>

<script>
  const button = document.querySelector("button");
  const iceCreamFlavorsInput = document.querySelector("input");

  button.addEventListener("click", () => {
    try {
      iceCreamFlavorsInput.showPicker();
      // A picker containing some ice cream flavors is shown.
    } catch (error) {
      // Use external library when this fails.
    }
  });
</script>

Feature detection

To check if showPicker() is supported, use:

if ('showPicker' in HTMLInputElement.prototype) {
  // showPicker() is supported.
}

Demo

A demo is available at https://show-picker.glitch.me/demo.html for you to play with all pickers supported by the browser.

Browser support

showPicker() is available in Chrome 99 or later.

What's next

At the time of writing, showPicker() is new to the web platform. The feature may need additional work in the future:

  • We may want to add a similar showPicker() to the <select> element in the future, if web developers ask for it.
  • It's possible closePicker() might be useful, and we could consider adding that if web developers ask for it.
  • We could add a permissions policy which allows cross-origin iframes to show browser pickers when their parent chain allows them to do so.

Feedback

The Chrome team and the web standards community want to hear about your experiences with showPicker().

Tell us about the design

Is there something about showPicker() that doesn't work like you expected? Or are there missing methods or properties that you need to implement your idea? Have a question or comment on the security model?

Problem with the implementation?

Did you find a bug with Chrome's implementation? Or is the implementation different from the spec?

  • File a bug at https://new.crbug.com. Be sure to include as much detail as you can, and simple instructions for reproducing. Glitch works great for sharing quick and easy repros.

Show support

Are you planning to use showPicker()? Your public support helps the Chrome team prioritize features and shows other browser vendors how critical it is to support them.

Send a tweet to @ChromiumDev and let us know where and how you are using it.

Acknowledgements

Thanks to Joe Medley for reviewing this article. Calendar image photo by Eric Rothermel on Unsplash.