是否有JavaScript方法可让html日期输入显示日期选择器？

Question

I would like to trigger the display of a date input's date-picker from an external button.

<input id="date" type="date" />
<button>display date</button>

For instance if I had the above code, how would I show the date-picker (the box which appears and allows you to pick a date) by clicking the button? I do not want to use jQuery or other libraries. Is there a way to show the native date-picker from an external trigger with vanilla JavaScript?

I'm looking for something like this:

var button = document.querySelector("button");
button.onclick = () => {
    var input = document.querySelector("#date");
    input.showDatePicker();
}

Answer 1

You can with

let x = document.getElementById('myDate'),
  d = new Date(),
  m = d.getMonth() < 10 ? `0${d.getMonth()}` : `${d.getMonth()}`,
  day = d.getDay() < 10 ? `0${d.getDay()}` : `${d.getDay()}`;

x.value = d.getFullYear() + "-" + m + "-" + day;

Demo

Answer 2

This works well on firefox and edge :

 <input id="date" type="date" /> <button>display date</button> <script type="text/javascript"> var button = document.querySelector("button"); button.onclick = () => { var input = document.querySelector("#date"); input.focus() input.click() } </script>