The showPicker() method is useful when you want to take advantage of the browser’s native picker UI while hiding the underlying input element. The following example demonstrates a custom date input built on this approach.

Browser support for showPicker() has been gradually improving over the years. Firefox Nightly and Safari 18 added support for displaying a datalist, for example. Unfortunately though, there’s still no reliable bug-free cross-browser approach for showing a picker for any input other than <input type="file">.

On desktop Safari, showPicker() works well when displaying a file picker or a color picker. It also works for date and datetime-local inputs, and to show the datalist dropdown for text-based inputs — however, a bug means the picker for those input types can’t be closed by clicking away, making use of showPicker() untenable.

On iPadOS and iOS, showPicker() only works for file inputs. It’s possible to open a picker programmatically on those operating systems via the focus() method, but browser inconsistencies make that approach difficult. focus() will show a picker for a select, date, datetime-local, time, month, week or color input on iPadOS and iOS but will not show a picker on any desktop browser. click() will open a color picker and file picker on all desktop browsers, but not on Safari or iOS. In Safari on macOS, click() will also open date and datetime-local pickers — but no other browser will. When using click(), Safari again suffers from the previously mentioned bug where closing the picker is far more difficult that it should be.

You might think of using showPicker() as a progressive enhancement, but there is no way to determine whether showPicker() is supported for a particular input type. The following will return true if the showPicker method is supported for any input type, which isn’t particularly helpful information:

if ("showPicker" in HTMLInputElement.prototype) {
  // ...
}