如何实现点击HTML5 datepicker输入框或获焦时唤起日期选择器

方案一：优先推荐 onFocus 触发方案 #

该方案符合优先使用onFocus的需求，通过原生JS监听输入框聚焦事件，主动调用原生showPicker()方法唤起选择器，交互逻辑更合理，不会篡改原生控件的默认样式。
实现代码：

<input type="datetime-local" id="datePicker">
<script>
const picker = document.getElementById('datePicker')
picker.addEventListener('focus', () => {
  // 调用原生方法唤起日期选择器
  picker.showPicker()
  // 可选：唤起后自动失焦，避免重复触发
  picker.blur()
})
</script>

注意事项 #

• showPicker()是HTML5原生API，Chrome 99+、Firefox 101+、Safari 15.4+均支持
• onFocus由用户点击输入框触发，属于用户交互上下文，不会被浏览器的安全策略拦截

方案二：纯CSS无JS方案 #

针对拉伸图标方案补充透明隐藏相关属性即可实现效果，无需编写JS代码：

input#modified::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
/* 给输入框加相对定位，作为指示器的定位父级 */
input#modified {
  position: relative;
}

<input type="datetime-local" id="modified">

该方案的核心是将原生的日历选择指示器拉伸到占满整个输入框区域，同时设置透明度为0完全隐藏，用户点击输入框任意位置都会触发指示器的点击事件，唤起日期选择器。

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