原生 <input type="date"> 是最快实现日历的方式，需确保 value 为 YYYY-MM-DD 格式，避免 jQuery UI 等过时方案，Vue/React 中应使用受控组件封装，并显式配置 locale 支持多语言。
用 <input type="date"> 最快实现原生日历
不用引入任何库，现代浏览器（Chrome 20+、Firefox 57+、Safari 14.1+、Edge 79+）直接支持。它会自动唤起系统级日期选择器，移动端体验尤其好。
常见错误是写成 <input type="text"> 再手动绑定 JS 日历，纯属重复造轮子。更隐蔽的坑是：如果服务器返回的日期格式不是 YYYY-MM-DD（比如 2024/05/20 或 2024-05-20T10:30:00），value 属性会失效——输入框显示为空或默认值。
- 必须确保
value是严格符合YYYY-MM-DD格式的字符串，例如：<input type="date" value="2024-05-20"> - 后端传参前用
toISOString().split('T')[0]或new Date().toJSON().slice(0,10)标准化 - 不支持设置时分秒，也不接受
min/max以外的格式校验（如禁止周末）
jQuery UI Datepicker 已过时，别再用
虽然搜索“HTML 嵌入日历”还能看到大量 jQuery UI 的示例，但它的 jquery-ui.js 和 jquery-ui.css 不仅体积大（压缩后仍 >200KB），而且自 2021 年起已停止功能更新，与现代 CSS（如 inset、scrollbar-gutter）和事件模型（如 pointerdown）存在兼容问题。
典型表现：在 Safari 17+ 或 Chrome 120+ 中点击无响应、月份切换卡顿、无法聚焦到输入框、onSelect 回调不触发。
立即学习“前端免费学习笔记（深入）”；
- 替代方案优先考虑轻量级 ES 模块库，如
flatpickr（~16KB gzipped）或air-datepicker（~12KB） - 如果必须沿用 jQuery 生态，至少升级到
jquery-ui@1.13.3+并禁用animate选项来缓解卡顿 -
$.datepicker.setDefaults({ dateFormat: 'yy-mm-dd' })必须在初始化前调用，否则格式解析失败
Vue/React 项目里别手动挂载日历 DOM
在组件中用 ref + useEffect（React）或 onMounted（Vue）去 new 一个日历实例，看似可控，实则埋下三个隐患：组件卸载时未销毁实例导致内存泄漏；服务端渲染（SSR）时报 document is not defined；多实例共享同一 input 时状态错乱。
正确做法是封装为受控组件，把日期值作为 prop 透传，由日历库内部管理 DOM 和交互逻辑。
- React 推荐用
react-flatpickr，它把value和onChange映射为标准受控属性，无需手动操作 ref - Vue 3 使用
vue3-flatpickr，注意不要在setup()里直接调用flatpickr(inputRef.value)，应使用v-model绑定 - 所有第三方日历组件都依赖
flatpickr底层，建议统一锁定flatpickr@4.6.13版本，避免因底层 API 变更导致样式错位
国际化日期显示容易漏掉 locale 配置项
很多人以为设置了 lang="zh-CN" 或页面 <html> 标签的 lang 属性，日历就会自动显示中文，其实完全不会。原生 <input type="date"> 的语言取决于操作系统区域设置，而 JS 日历库默认只加载英文 locale。
结果就是：月份名仍是 Jan/Feb，周起始日是 Sunday，甚至 formatDate 输出的字符串仍是英文缩写。
-
flatpickr必须显式传入locale: 'zh'，并提前 import'flatpickr/dist/l10n/zh' - React/Vue 封装组件通常不透出
localeprop，得检查文档是否支持，或手动 patchflatpickr.localize(flatpickr.l10n.zh) - 注意
zh和zh-CN在不同版本 flatpickr 中对应不同文件，填错会导致 locale 加载失败且静默降级为英文
日历不是“嵌进去就行”的元素，时间格式、时区、可访问性（a11y）、SSR 兼容、多语言加载顺序，每个点都可能在某个环境突然崩掉。最容易被忽略的是：用户改系统语言后，原生日历的显示语言会变，但 JS 日历不会自动响应——这需要监听 navigator.language 变化并重新初始化。
