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 12 days ago.

Related Topics

Related Articles

About the author

Stefan standing in the park in front of a green background

Frontend nerd with over ten years of experience, "Today I Learned" blogger, conference speaker, Tiny helpers maintainer, and DevRel at Checkly.