最简单但兼容性有限，现代浏览器支持原生选择器并校验YYYY-MM-DD格式；需设value、min/max，服务端必须二次校验；JS中应使用valueAsDate而非new Date(value)防时区偏移；不支持时用text+pattern+轻量JS降级。
用 <input type="date"> 最简单，但浏览器支持不一致
现代浏览器基本都支持 <input type="date">，它会自动唤起原生日期选择器（iOS 是滚轮，Chrome 是日历弹窗），无需 JS 就能校验格式（必须为 YYYY-MM-DD）。但注意：IE 完全不支持，Firefox 直到 57 版才支持，旧版 Safari 在 macOS 上显示为文本框且无校验。
实操建议：
- 始终设置
value属性为标准格式，比如<input type="date" value="2024-06-15">；空值时留空，不要写"null"或"undefined" - 配合
min和max限制可选范围，例如min="2024-01-01"，否则用户可能选到无效日期（如 2024-02-30） - 服务端必须再次校验——因为用户可通过 DevTools 修改 HTML 绕过前端限制
获取和提交的值永远是 YYYY-MM-DD 字符串，不是 Date 对象
<input type="date"> 的 .value 返回的是字符串，不是 JavaScript 的 Date 实例。直接传给 new Date(input.value) 虽然能解析，但存在时区陷阱：字符串会被当作 UTC 零点解析，再转成本地时间，可能导致日期偏移一天。
正确做法：
立即学习“前端免费学习笔记（深入）”；
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 提交表单时，后端按
YYYY-MM-DD接收，直接存数据库（多数数据库支持该格式） - 若需在 JS 中计算，用
input.valueAsNumber（返回毫秒数）或input.valueAsDate（返回本地时区的Date对象），这两个属性兼容性略差（IE 不支持，但现代 Chrome/Firefox/Safari 都行） - 避免手写
new Date(input.value + 'T00:00')，容易因时区出错
不支持原生控件时，fallback 方案别硬套 JS 库
当需要兼容 IE 或老版本 Safari，不能直接上 flatpickr 或 DatePicker 这类重型库——它们体积大、样式难统一、还可能和已有 CSS 冲突。
轻量 fallback 建议：
- 先检测支持性：
const supportsDateInput = typeof document.createElement('input').type === 'string' && 'date' in document.createElement('input') - 不支持时，用普通
<input type="text">，配合pattern="\d{4}-\d{2}-\d{2}"和title="格式：YYYY-MM-DD"提示用户 - 加一层简单 JS 校验（比如检查是否为合法日期字符串），不依赖外部库
- 如果项目已用
moment.js或dayjs，可用其parse方法做二次验证，但别只为日期输入框引入整个库
移动端键盘不弹出数字键，但用户仍可能手动输错
虽然 type="date" 在 iOS/Android 上默认唤起日期选择器，但用户长按仍可触发原生键盘并手动输入。此时无法阻止非数字字符（比如输入 2024/06/15 或 15-06-2024），导致 .value 为空字符串或非法值。
应对方式：
- 监听
input事件，实时检查input.value是否匹配/^\d{4}-\d{2}-\d{2}$/，不匹配就清空或标红 - 表单提交前，显式检查
input.checkValidity()，它对type="date"会判断格式和范围 - 别依赖
onchange——用户手动输错后没失焦，onchange就不会触发
input.value 直接喂给 new Date() 导致的时区偏移。这两处不处理，上线后查 bug 往往要绕半天。 
