HTML中点击input日期控件图标如何让弹窗直接打开年份选择界面

原生HTML5的<input type="date">日期选择器的交互逻辑完全由浏览器内核控制，目前没有公开的标准API可以直接指定点击后默认打开年份选择界面，以下是两类可落地的可行方案：

方案1：原生输入器曲线优化，适配出生日期选择场景 #

• 利用不同类型的日期输入器组合实现优先选年的逻辑：优先使用type="month"让用户先完成年份、月份选择，再动态切换为日期选择器选具体日期，整体操作成本比默认流程更低，代码示例如下：

<input type="month" id="birthPicker" placeholder="请选择出生年月">
<script>
const picker = document.getElementById('birthPicker');
picker.addEventListener('change', () => {
  // 拿到选中的年月
  const selectedMonth = picker.value;
  // 创建日期选择器，默认值为选中年月的第一天
  const datePicker = document.createElement('input');
  datePicker.type = 'date';
  datePicker.value = `${selectedMonth}-01`;
  // 替换原月份选择器
  picker.replaceWith(datePicker);
  // 自动唤起日期选择器，此时已定位到之前选的年月
  datePicker.showPicker();
  // 可根据需求回填最终选中的日期到表单字段
  datePicker.addEventListener('change', () => {
    console.log('选中的出生日期：', datePicker.value);
  })
})
</script>

注：showPicker()方法需要在用户交互事件的回调中调用才会生效，适配Chrome 99+、Firefox 101+、Safari 15.4+及以上版本，需要兼容低版本浏览器可删除该方法，引导用户手动点击日期选择器即可。

• 额外优化：如果要继续使用原生type="date"，可以额外设置min、max属性限制可选的日期范围，比如选出生日期可设置min="1900-01-01" max="2016-12-31"，缩小用户切换年份时的选择范围，降低操作成本。

方案2：使用自定义日期选择组件（可控性最高） #

如果对交互要求高，需要完全自定义选择逻辑，建议放弃原生日期输入器，自行开发或使用组件库的日期选择组件。这类自定义组件可以直接配置默认打开年份选择面板，完全适配出生日期这类需要优先选年的场景，不受浏览器原生逻辑限制。

内容的提问来源于stack exchange，提问作者Arno van Oordt