应使用javascript调用input.click()触发日期选择器，而非label for属性或showpicker()；因for绑定在多数浏览器中无效，showpicker()兼容性差，而click()跨浏览器可靠且可交互。
点击文字触发 date 输入框的 click 事件
HTML 原生 <input type="date"> 不支持直接用 label 的 for 属性唤起日期选择器（部分浏览器下无效），必须靠 JavaScript 主动触发 click() 方法才能可靠打开日历面板。
- 不能只写
<label for="mydate">选择日期</label><input id="mydate" type="date">—— Chrome 和 Safari 下点击文字通常无反应 - 必须绑定点击事件，调用
inputElement.click()，这是最轻量且跨浏览器有效的做法 - 避免用
focus()或showPicker()：前者不唤起日历，后者（showPicker()）目前仅 Chromium 112+ 支持，Firefox/Edge/Safari 尚未实现
完整可运行的 HTML 示例
以下代码在 Chrome、Edge、Firefox（最新版）、Safari（16.4+）中均能通过点击文字打开日期选择器：
<label id="date-label">? 选择日期</label>
<input id="date-input" type="date"><script>
const label = document.getElementById('date-label');
const input = document.getElementById('date-input');
label.addEventListener('click', () => input.click());
</script>
注意：label 里不要写 for 属性，也不要用 <label>...<input></label> 包裹结构——嵌套方式在 type="date" 上反而容易导致双击或聚焦异常。
为什么不用 showPicker()？
showPicker() 看起来更语义化，但实际落地风险高：
-
input.showPicker()在 Firefox（125）和 Safari（17.4）仍会抛出TypeError: input.showPicker is not a function - 即使在支持的 Chromium 中，若输入框被
disabled、readonly或 CSS 隐藏（display: none/visibility: hidden），也会静默失败，且无错误提示 -
click()是底层原生行为，兼容性确定，失败时也会有明确反馈（比如控制台报 “element not interactable”）
移动端点击区域太小怎么办？
原生 type="date" 在 iOS 和 Android 上默认控件高度低、热区窄，纯靠文字点击是合理优化手段，但要注意：
- 确保
label元素本身可点击：添加cursor: pointer和足够内边距（padding），避免用户误判 - 不要给
input设opacity: 0或position: absolute; left: -9999px—— 这会让click()失效（元素不可交互） - 如果需隐藏输入框但保留功能，用
width: 0; height: 0; overflow: hidden;+position: absolute;更稳妥
input 是否已渲染完成就绑定事件，或者把 click() 绑在了未插入 DOM 的节点上。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
