如何实现点击HTML date输入框触发打开日期选择器？

我使用HTML的date类型输入框实现日期选择器：

<input type="date" id="birthday" name="birthday">

目前点击日历图标可打开日期选择器，但希望点击输入框本身也能触发打开日期选择器，现有代码框架如下：

$( "#birthday" ).click(function() {
  // open picker
});

解决方案 #

可以调用输入框原生的showPicker()方法直接触发日期选择器弹出，修改后的代码如下：

$("#birthday").click(function(e) {
  // 过滤掉点击日历图标的重复触发
  if (e.target.type === "date") {
    e.target.showPicker();
  }
});

说明 #

• showPicker()是HTMLInputElement的原生API，支持Chrome、Firefox、Edge等主流现代浏览器，专门用于唤起内置的输入选择器弹窗。
• 添加e.target.type === "date"的判断，是因为日历图标属于输入框的一部分，点击图标时也会触发click事件，该判断能避免重复调用方法导致的异常。

内容的提问来源于stack exchange，提问作者Trombone0904