Published at
Updated at
Reading time

Not too long ago, we finally got cross-browser-supported date input elements. With Safari joining the party, we're now all green on the browser support front to show native date pickers everywhere.

MDN Compat Data (source)
Browser support info for type="date"

There was still one piece missing, though. If now all major browsers support native date pickers, developers asked for a method to programmatically open it.

Say hello to elem.showPicker()!

const button = document.querySelector("button");
const dateInput = document.querySelector("input");
button.addEventListener("click", async () => {
  try {
    await dateInput.showPicker();
    // A date picker is shown.
  } catch (error) {
    // Use external library when this fails.

The new method will be available in Chromium 99+. But it's not only useful when dealing with date inputs. showPicker enables you to open browser pickers of type date, month, week, time, datetime-local, color and file, too! ๐Ÿ‘

MDN Compat Data (source)
Browser support info for dateInput.showPicker()

Webkit and Firefox also showed interest in implementing it:

I just love it when we get new DOM methods!

Update on Sep 12: with Safari 16 showPicker is supported across all major browsers! ๐ŸŽ‰

Was this post helpful?
Yes? Cool! You might want to check out Web Weekly for more web development articles. The last edition went out 4 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles