Background:

Developers have been asking for years for a way to programmatically open a browser date picker. See https://www.google.com/search?q=programmatically+open+date+picker+site:stackoverflow.com
Because of that, they had to rely on custom widget libraries and CSS hacks for specific browsers.

Date pickers in Chrome Desktop, Chrome Mobile, Safari Desktop, Safari Mobile, and Firefox Desktop (July 2021).

Proposal

A new showPicker() method to the HTMLInputElement interface would show a browser picker (if supported) for
<input type="date">, <input type="month">, <input type="week">, <input type="datetime-local">, and <input type="time"> HTML elements . This method is handy, easy to use, and friendly to discover.

As it's already possible to listen tochange events to know when the HTML element value changes, I believe it's OK to make this method synchronous.

Example usage

// Show a date picker
const inputDateElement = document.querySelector('input[type="date"]');
inputDateElement.showPicker();

Feature detection

if ("showPicker" in HTMLInputElement.prototype) {
  ... 
}

Open questions

1. Should we restrict the number of date pickers opened?
2. Date pickers are modal on Mobile. They're not modal on Desktop. Should we require a user activation?

Alternative considered

• Adding a brand new DatePicker object that could be used with HTML elements or in standalone mode seems overkill.

• According to Should <input type=date> have a "input activation behavior" defined?  #3232 (comment), it seems like a synthetic click() should not trigger a browser date picker.

Resources

• Chromium bug