原生最简单，但safari旧版、ie及部分安卓webview中会退化为文本框；需用el.type === 'date' && 'showpicker' in el运行时检测，不支持时降级为text+flatpickr，并严格校验后端日期格式与时区。
直接用 <input type="date"> 最简单，但要注意浏览器兼容性
现代浏览器基本都支持原生 <input type="date">，不用引入任何 JS 库就能弹出日期选择器。但它在 Safari（旧版本）、IE 和部分安卓 WebView 中不生效，会退化成普通文本框。
- 写法：
<input type="date" id="birth-date" name="birth-date"> - 值格式固定为
YYYY-MM-DD（如"2024-03-15"），提交或读取时不要手动拼接字符串 - 可加
min、max、value属性控制范围和默认值，例如：<input type="date" min="2020-01-01" max="2030-12-31" value="2024-01-01"> - Safari 14.1+ 才开始支持，iOS 14.5+ 才稳定；老版本需降级方案
需要兼容旧浏览器？选一个轻量 JS 库补位
如果必须支持 IE 或老 Safari，推荐 flatpickr（体积小、无依赖、主题少但够用）或 vanillajs-datepicker（纯 JS、零依赖、API 简洁）。避开 jQuery 插件，现在多数项目已不用 jQuery。
-
flatpickr初始化示例：flatpickr("#date-input", { dateFormat: "Y-m-d", locale: "zh" }); - 注意：它会覆盖原生
input的样式，且默认不校验格式，需自行监听onChange检查返回值是否为有效 Date 对象 - 别把
input设为readonly后再用 flatpickr——它内部会自动禁用输入，设readonly反而可能阻止点击触发弹窗 - 如果页面有多个日期控件，避免重复调用初始化，建议统一用 class 选择器批量绑定
后端接收时，日期字符串解析容易出错
前端传来的 2024-03-15 在 JS 里用 new Date("2024-03-15") 解析是安全的，但传到后端后，不同语言对时区处理差异很大。
- Python Flask/Django 默认按服务器本地时区解析，建议显式用
datetime.fromisoformat("2024-03-15")或date.fromisoformat(...) - Node.js 的
new Date("2024-03-15")返回的是 UTC 零点时间，不是本地日零点，存库前务必确认时区意图 - 如果前后端约定用 UTC 时间，前端应传带时区的 ISO 字符串（如
"2024-03-15T00:00:00Z"），而不是只传日期部分 - 别依赖
input.valueAsDate在所有浏览器都可靠——IE 不支持，Safari 旧版可能返回 null
移动端真机测试不能跳过
Chrome 模拟器显示正常，不代表真机 OK。iOS 上原生 date input 弹出的是滚轮选择器，Android 各厂商定制 ROM 可能改掉 UI 或行为（比如小米某些版本点开没反应）。
- 真机测试重点看：能否唤起选择器、能否正确回填、点击空白处是否收起、键盘是否意外弹出
- 如果发现 iOS 上点击无响应，检查是否有父元素设置了
pointer-events: none或 CSS 层级遮挡 - 避免给
input[type="date"]设置width: 100%加box-sizing: border-box外还加 padding —— 某些 Android 浏览器会把箭头按钮挤出可视区
type="date" 是首选，但“能用”不等于“可用”。真正卡住人的，往往是 Safari 的兼容边界、后端时区转换偏差、还有那些只在 iPhone XS 上复现的点击失灵问题。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
