如何通过JavaScript触发Chrome/Edge的input[type='date']日期选择器

方案1：纯CSS兼容方案（兼容性最优，无JS依赖） #

该方案不需要修改原有逻辑，仅调整样式即可实现全浏览器兼容：

/* 父容器设置相对定位，作为输入框的定位基准 */
.input {
  position: relative;
  display: inline-block;
}
label {
  border: 1px solid black;
  padding: .2em .3em;
  cursor: pointer;
  display: inline-block;
}
#dpk {
  position: absolute;
  /* 输入框完全覆盖label区域 */
  inset: 0;
  width: 100%;
  height: 100%;
  /* 隐藏输入框本身，但保留点击能力 */
  opacity: 0;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

HTML结构保持不变即可：

<div class='input'>
  <label for="dpk">选择日期</label>
  <input type='date' id='dpk'/>
</div>

核心逻辑是将隐藏的日期输入框完全覆盖在label上方，用户点击label时实际点击的是输入框的有效区域，自动触发各浏览器的日期选择器唤起逻辑，不存在兼容性问题。

方案2：JS方案（适合无需兼容老旧浏览器的场景） #

Chrome 99+、Edge 99+、Firefox 91+均支持输入框原生的showPicker()方法，可直接唤起日期选择面板：

const dateInput = document.getElementById('dpk');
const dateLabel = document.querySelector('label[for="dpk"]');

dateLabel.addEventListener('click', (e) => {
  // 阻止label默认的点击跳转聚焦逻辑
  e.preventDefault();
  try {
    // 直接唤起日期选择器
    dateInput.showPicker();
  } catch (error) {
    // 低版本浏览器兜底，可自行扩展降级逻辑
    dateInput.focus();
  }
});

注意：如果使用该方案，不要将输入框设置为display: none，可改为position: absolute; left: -9999px; opacity: 0;将其移出视口，避免部分浏览器因DOM不可见报错。

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