New on the web: programmatically open a native date picker (#blogPost)

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"

20	true	12	57	57	14.1	5	true	true

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()

99	99	99	Nei	Nö	Nö	Nope	Nein	99

Webkit and Firefox also showed interest in implementing it:

• Firefox bug ticket
• Webkit bug ticket

I just love it when we get new DOM methods!