原生 <input type="date"> 在 Safari 和部分 Android WebView 中兼容性差，且缺乏最小/最大日期限制、禁用日期、中文本地化等能力；flatpickr 体积小、无依赖、不替换 DOM、兼容主流框架，但需注意表单重置同步、动态元素绑定和移动端点透三大坑。
为什么原生 <input type="date"> 不够用
原生日期输入框在 Chrome/Firefox 中能正常弹出日历，但在 Safari（尤其是旧版）和部分 Android WebView 中完全不渲染控件，或只显示文本框。用户手动输入格式（如 2024-05-20）又容易出错，且无法限制最小/最大日期、禁用特定日期、自定义中文星期/月份显示——这些都得靠第三方插件补足。
选 flatpickr 而不是 DatePicker.js 或 bootstrap-datepicker
flatpickr 体积小（gzip 后约 12KB）、无依赖、支持 IE11+，关键是它**直接绑定到已有 <input> 元素上，不替换 DOM**，和表单序列化、React/Vue 的 v-model / ref 都兼容。而 bootstrap-datepicker 强依赖 jQuery 和 Bootstrap CSS，DatePicker.js 已停止维护。
- 初始化只需一行：
flatpickr("#myDateInput", { locale: "zh", minDate: "today" }); - 它会自动读取
input的value、min、max、disabled属性，无需重复配置 - 提交表单时，
input.value仍是标准 ISO 格式（YYYY-MM-DD），后端无需额外解析
必须手动处理的三个坑
插件再好，不注意这三点，上线后准出问题：
-
表单重置后插件状态不同步：点击
<input type="reset">或调用form.reset()，原生input.value清空了，但flatpickr的日历面板还停留在旧值。需监听reset事件并调用fp.clear() -
动态插入的表单元素没绑定：用 JS 追加新行（如添加多组日期字段），不能只对初始元素初始化。得在插入后对每个新
input.flatpickr单独调用flatpickr(el, options) -
移动端点透导致键盘弹出：iOS Safari 点击日历图标有时会穿透到底层
input，触发软键盘。解决方案是给input加readonly属性（flatpickr默认允许点击触发），并确保 CSS 中user-select: none不误设在日历容器上
和服务端日期格式对齐的关键配置
后端通常接收 YYYY-MM-DD，但有些老系统要 YYYY/MM/DD 或时间戳。别在 JS 里拼字符串——用 flatpickr 的 dateFormat 和 altFormat 分离显示与提交值：
flatpickr("#orderDate", {
dateFormat: "Y-m-d", // 提交到服务器的 value 值格式
altFormat: "F j, Y", // 用户看到的显示格式（如 "May 20, 2024"）
altInput: true, // 自动生成隐藏 input 存 altFormat 值（可选）
disableMobile: true // 强制桌面版日历，避免 iOS 原生控件干扰
});
如果后端非要时间戳，改用 onChange 回调转换：onChange: (selectedDates) => input.value = selectedDates[0].getTime().toString()。但注意：这样会让 input.value 变成数字字符串，失去原生日期验证能力，慎用。
最麻烦的其实是时区——new Date("2024-05-20") 在东八区解析为当天 00:00，但在美国可能变成 5月19日。统一用 UTC 解析或后端强制按北京时间处理，前端少动时间对象。
