如何通过ref触发input[type=date]的原生日期选择器

原生<input type="date">无法像type="file"那样在display: none状态下通过.click()唤起选择面板，是浏览器原生实现的交互限制导致的：

• type="file"默认开放了隐藏状态下JS触发唤起文件选择窗口的能力
• type="date"的原生日期选择器会校验元素的可交互状态，display: none会将元素移出渲染树，浏览器判定元素不可交互，会直接拦截面板唤起操作，且不会抛出任何报错。

可行实现方案 #

不要用display: none隐藏日期输入框，改用**视觉隐藏（保留交互能力）**的方式处理元素：既不会让输入框在页面上可见、不占用布局空间，又能让浏览器判定元素处于可交互状态，正常触发日期面板。

1. 先定义通用的视觉隐藏样式，这是无障碍访问规范推荐的标准写法，屏幕阅读器也能正常识别元素：

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

2. 替换原有的隐藏写法，给日期输入框添加这个样式类，按钮点击时直接调用ref的click方法即可生效：

<button @click="$refs.dateRef.click()">选择日期</button>
<input type="date" ref="dateRef" class="visually-hidden">

注意事项 #

• 不要在异步回调（比如setTimeout、接口请求返回回调）里调用日期输入的.click()方法，这类脱离用户交互同步执行栈的触发，会被大部分浏览器判定为非用户主动操作，直接拦截面板弹出
• 不要用visibility: hidden配合负定位的方式隐藏元素，部分Safari版本依然会拦截这类元素的交互触发，上面给出的visually-hidden类是全主流浏览器兼容的写法

补充：部分现代Chromium内核浏览器支持日期输入的showPicker()方法来直接唤起面板，但该方法兼容性较差，低版本Safari、Firefox无法支持，且同样要求元素不能处于display: none状态，不建议生产环境使用。

• 如果需要高度自定义日期选择面板的样式，不建议强行修改原生input的默认样式，直接使用成熟的日期选择组件会更可控。

内容的提问来源于stack exchange，提问作者Artur Müller Romanov