New on the web: programmatically open a native date picker

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	20	12	57	57	14.1	5	1.5	20

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

99	99	99	101	101	16	16	18.0	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!