html5 原生 `` 元素默认仅在点击右侧日历图标时弹出选择器；可通过 `showpicker()` 方法在点击输入框任意位置（如使用 `onclick` 或 `onfocus`）主动唤起日期选择器，无需依赖第三方库。
现代浏览器（Chrome 102+、Edge 102+、Firefox 113+、Safari 16.4+）已原生支持 HTMLInputElement.showPicker() 方法，它能以编程方式触发系统级日期选择器，行为与用户点击内置日历图标完全一致。
✅ 推荐实现方式：使用 onfocus（语义更合理）
<input type="date" id="birthday" name="birthday" onfocus="this.showPicker()" placeholder="请选择生日" >
? 为什么推荐 onfocus 而非 onclick？ onfocus 更符合可访问性（a11y）规范：键盘用户按 Tab 进入该输入框时也会自动触发选择器； 避免移动端点击穿透或重复触发问题（如双击误判）； 语义上，“获得焦点即唤起选择器”比“任意点击即唤起”更符合表单交互直觉。
⚠️ 注意事项
-
浏览器兼容性：请务必检查目标环境是否支持 showPicker()。可在 JavaScript 中安全调用：
const input = document.getElementById('birthday'); input.addEventListener('click', () => { if (typeof input.showPicker === 'function') { input.showPicker(); } else { // 降级方案：例如聚焦后手动打开（部分旧版浏览器仅支持聚焦触发） input.focus(); } }); - 不支持 click 事件直接调用的限制：某些浏览器（如旧版 Safari）可能因安全策略禁止在非用户交互事件中调用 showPicker()，因此务必确保调用发生在真实的用户手势（click、focus、keydown 等）回调内。
- 样式覆盖风险：若自定义了 appearance: none 或隐藏了原生控件，showPicker() 仍有效，但需确保元素可聚焦（如未设置 disabled 或 tabindex="-1"）。
✅ 总结
使用 onfocus="this.showPicker()" 是最简洁、健壮且符合标准的解决方案。它无需 jQuery、不引入额外依赖，充分利用原生 API，兼顾可用性、可访问性与现代浏览器性能。对于需要兼容较老环境的项目，建议搭配特性检测 + 渐进增强策略，确保基础功能始终可用。
