![François Beaufort](https://web.dev/images/authors/beaufortfrancois.jpg) François Beaufort [GitHub](https://github.com/beaufortfrancois)

<br />

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](https://www.google.com/search?q=programmatically+open+date+picker+site:stackoverflow.com) 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](https://developer.chrome.com/static/blog/show-picker/image/screenshots-browser-pick-75fe4ec84816d.png) Browser date pickers in Chrome desktop, Chrome mobile, Safari desktop, Safari mobile, and Firefox desktop (July 2021).

> [!NOTE]
> **Note:** Unlike a third-party picker widget, a browser picker is familiar to the user, has great platform-specific support, and is always maintained as part of the browser.

## 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`](https://developer.mozilla.org/en-US/docs/Web/API/DOMException) exception.
For security reasons, it will throw a [`SecurityError`](https://developer.mozilla.org/en-US/docs/Web/API/DOMException) 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:

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

## Demo

A demo is available at <https://cdpn.io/web-dot-dev/fullpage/LEVKVdr> 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](https://developer.chrome.com/docs/privacy-sandbox/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?

- File a spec issue on the [WHATWG GitHub repo](https://github.com/whatwg/html/issues), or add your thoughts to an existing issue.

### 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.

### 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](https://twitter.com/ChromiumDev) and let us know where and how you are using it.

## Helpful links

- [MDN documentation](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/showPicker)
- [WHATWG explainer](https://github.com/whatwg/html/pull/7319)
- [WHATWG specification](https://html.spec.whatwg.org/multipage/input.html#dom-input-showpicker)
- [TAG review](https://github.com/w3ctag/design-reviews/issues/688)
- [Demo](https://cdpn.io/web-dot-dev/fullpage/LEVKVdr) \| [Demo source](https://codepen.io/web-dot-dev/pen/LEVKVdr)
- [Chromium bug](https://bugs.chromium.org/p/chromium/issues/detail?id=939561)
- [ChromeStatus.com entry](https://www.chromestatus.com/feature/5692248021794816)

## Acknowledgements

Thanks to [Joe Medley](https://github.com/jpmedley) for reviewing this article.
Calendar image photo by [Eric Rothermel](https://unsplash.com/@erothermel) on [Unsplash](https://unsplash.com/photos/FoKO4DpXamQ).