原生 <input type="date"> 足够轻量且兼容主流浏览器及移动端，需确保 value、min、max 为严格 YYYY-MM-DD 格式，注意时区处理与 CSS 干扰问题。
HTML 日期选择器怎么用？原生 <input type="date"> 就够了
不用额外引入库，浏览器原生支持的 <input type="date"> 是最轻量、兼容性足够好的方案。它在 Chrome、Edge、Firefox（104+）、Safari（16.4+）都可用，iOS 和 Android 移动端也默认唤起系统日期控件。
常见错误是手动写日历组件或强依赖 flatpickr、DatePicker 等第三方库——其实多数场景下纯 HTML 就能解决问题。
- 必须设置
value为YYYY-MM-DD格式字符串，其他格式（如MM/DD/YYYY）会被忽略或清空 - 不支持设置时间部分，
type="datetime-local"才行，但兼容性差很多（Safari 对datetime-local支持不稳定） - 用户未选择时，
input.value是空字符串，不是null或undefined，校验时注意用!input.value而非input.value == null
为什么选中的日期没显示？检查 value 格式和时区
最常踩的坑：后端返回的日期是 "2024-05-20T08:30:00Z"，直接赋给 input.value，结果输入框空白。
因为 <input type="date"> 只认 YYYY-MM-DD，多余的时间、时区信息会导致解析失败。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：用
new Date(dateString).toISOString().slice(0, 10)提取日期部分（注意：该方法依赖本地时区，若需 UTC 日期，得先转成当地时间再切片） - 更稳妥方式：
date.toISOString().split('T')[0]，但前提是date是有效Date实例 - 服务端传参时，如果用的是 ISO 字符串，前端别直接塞进
value，先做一次格式归一化
min 和 max 不生效？它们只接受 YYYY-MM-DD 字符串
min 和 max 属性控制可选范围，但值必须是严格格式的字符串，不能是 Date 对象或带时间的 ISO 字符串。
例如：<input type="date" min="2024-01-01" max="2024-12-31"> 有效；而 min="2024-01-01T00:00:00" 无效，浏览器会忽略该属性。
- 动态设置时，用
input.min = new Date().toISOString().slice(0, 10)，别用input.min = new Date() - 设
max为今天，要注意：若用户本地时间比服务器早，可能造成“明天已不可选”这种逻辑错位，建议后端统一提供基准日期 - Safari 对
min/max的响应有延迟，有时需触发一次input.focus()才刷新可选范围
移动端点击没反应？检查是否被 pointer-events: none 或覆盖层拦截
iOS 和 Android 上，原生日期选择器需要真实可点击区域。常见失效原因不是 HTML 写法问题，而是 CSS 或布局干扰。
比如父容器加了 overflow: hidden，或者 input 被一个半透明 <div> 盖住但没设 pointer-events: auto，都会导致点击无响应。
- 快速排查：在 DevTools 里选中 input 元素，右键 → “Scroll into view”，确认它在视口内且没被遮挡
- 临时加
style="position: relative; z-index: 9999;"测试是否是层级问题 - 某些 UI 框架（如 Ant Design、Element Plus）的表单封装会重置原生行为，此时应优先用框架提供的日期组件，而非强行套用原生
input
真正难的不是怎么写这个标签，而是怎么让它的行为在各种时区、各种设备、各种数据格式下保持一致。尤其是日期字符串的来回转换，一不留神就多出一天或少掉八小时。
