Chrome 65+下用JS实现按钮触发<input type="date">日期选择器（输入框隐藏）

嘿，刚好在Chrome 65+环境下折腾过一模一样的需求，给你一个完全基于原生API的靠谱方案，不用依赖任何第三方组件：

核心思路 #

Chrome 65及以上支持HTMLInputElement.showPicker()方法，这是专门用来触发原生输入框选择器（包括日期、时间、文件等）的API，完美替代手动点击输入框箭头的操作。同时我们可以把原生的date输入框隐藏起来（但要保证它在DOM中可交互），只保留自定义按钮。

完整代码示例 #

HTML部分 #

<button type="button" id="datePickerBtn">点击选择日期</button>
<!-- 隐藏原生日期输入框：用绝对定位移出可视区域，确保元素可交互 -->
<input type="date" id="hiddenDateInput" style="position: absolute; left: -9999px; top: 0;">
<!-- 可选：展示选中的日期 -->
<div class="selected-date">
  你选中的日期：<span id="selectedDateText"></span>
</div>

JavaScript部分 #

const pickerBtn = document.getElementById('datePickerBtn');
const hiddenDateInput = document.getElementById('hiddenDateInput');
const selectedDateText = document.getElementById('selectedDateText');

// 按钮点击触发日期选择器
pickerBtn.addEventListener('click', () => {
  try {
    // 直接调用showPicker()弹出日历
    hiddenDateInput.showPicker();
  } catch (error) {
    // 极端情况的容错（Chrome65+基本不会触发）
    console.error('无法显示日期选择器:', error);
  }
});

// 监听日期选择后的事件
hiddenDateInput.addEventListener('change', () => {
  if (hiddenDateInput.value) {
    selectedDateText.textContent = hiddenDateInput.value;
    // 这里可以添加你的业务逻辑，比如提交表单、更新页面数据等
  }
});

关键细节说明 #

• 隐藏输入框的方式：不要用display: none，虽然Chrome里可能也能工作，但部分浏览器会对不可见元素限制API调用，用position: absolute; left: -9999px既能让用户看不到，又能保证元素在DOM中正常交互。
• 为什么不用focus()：Chrome中单纯调用focus()只会让输入框获得焦点，但不会自动弹出日历选择器，而showPicker()是专门为触发选择器设计的API，完全符合你的需求。
• 兼容性：这个方案完全适配Chrome 65及以上版本，不需要额外的兼容代码。

扩展优化 #

如果你需要美化按钮，直接给按钮加CSS样式就行，完全不影响功能；如果需要自定义日期格式的展示，可以用Date对象对选中的日期进行格式化处理。

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