Artboard 16light, inspiration, solution, idea, innovation,Google Sheets iconSwift icon
Published at
Updated at
Reading time
1min

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"
chromechrome_androidedgefirefoxfirefox_androidsafarisafari_iossamsunginternet_androidwebview_android
20true12575714.15truetrue

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

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

Webkit and Firefox also showed interest in implementing it:

I just love it when we get new DOM methods!

Related Topics

Related Articles