原生 input[type="date"]因兼容性差、样式不可控、国际化弱且缺乏禁用日期、联动校验等能力，无法直接用于生产环境；推荐使用Flatpickr插件，它轻量、支持中文、可自定义禁用逻辑与事件钩子，并需注意手动管理生命周期。
原生 HTML5 的 在多数现代浏览器中能直接唤起系统级日期选择器，但兼容性差、样式不可控、国际化弱——真要稳定用在生产环境，必须靠 JS 插件。
为什么不能只靠 input[type="date"]
它在 Safari（尤其旧版 iOS）、部分安卓 WebView 和 IE 中完全不生效；即使生效，也无法自定义按钮文字、禁用日期范围、高亮节假日，更没法和表单校验链路打通。你看到的“日期选择器”在用户端可能只是个空白框或文本输入框。
-
new Date().toISOString().split('T')[0]这类手动格式化写法，在 Safari 上会因时区处理异常导致日期错位一天 - 设置
min/max属性后，Chrome 会禁用对应日期，但 Safari 不响应，需 JS 补充拦截 - 移动端点击无反馈、无键盘弹出控制、无法监听“确认”动作（只有
change，且不区分是选中还是手动输入）
推荐插件：Flatpickr（轻量 + 零依赖 + 真实可用）
它体积小（flatpickr.min.js 约 25KB），支持中文 locale、禁用日期数组、自定义渲染、与 Vue/React 也能简单桥接，且默认不污染全局变量。
- 引入方式：
- 基础调用：
flatpickr("#myDate", { locale: "zh", dateFormat: "Y-m-d", minDate: "today", disable: ["2024-08-15", "2024-08-16"] }); - 注意：
disable接收字符串数组、函数或对象（如{from: "2024-08-10", to: "2024-08-12"}），别传错类型
高频功能：联动禁用 + 实时校验 + 格式回填
实际业务中，起止日期互锁、禁用历史日、提交前检查是否为空——这些不是配置项开关，得靠事件钩子写逻辑。
立即学习“前端免费学习笔记（深入）”；
- 用
onChange拿到选中值（数组形式，第一个是字符串）：onChange: function(selectedDates, dateStr, instance) { const startDate = document.getElementById("start"); if (dateStr) { // 自动设结束日期最小值 flatpickr("#end", { minDate: dateStr }); } } - 禁用周末 + 法定节假日需用
disable函数：disable: function(date) { const day = date.getDay(); return day === 0 || day === 6 || isHoliday(date); // isHoliday 自定义 } - 表单提交前校验：
instance.input.value是最终回填值，别用instance.selectedDates[0]——它可能是Date对象，序列化时易出错
最常被忽略的是：插件初始化后，如果 DOM 被框架（如 Vue 的 v-if）销毁重建，必须手动调用 instance.destroy() 再重 init，否则内存泄漏 + 多个实例打架。Flatpickr 不自动管理生命周期。
