最直接方案是 input type="date"，现代浏览器（Chrome、Edge、Firefox 57+、Safari 14.1+）原生支持并触发系统级日期选择器，无需 JS 即可校验格式与限制范围，但 Safari 旧版本不支持。
用 input type="date" 最直接，但浏览器兼容性得看场景
现代浏览器（Chrome、Edge、Firefox 57+、Safari 14.1+）原生支持 input type="date"，它会触发系统级日期选择器，无需 JS 就能校验格式、限制范围。但 Safari 旧版本（
常见错误现象：input type="date" 在低版本 Safari 中显示为空白或普通文本框，用户可能手动输入 2023-13-45 这类非法值，而表单仍能提交。
- 必须配合
min和max属性限制可选范围，例如：<input type="date" min="2023-01-01" max="2025-12-31"> - 初始值需为
YYYY-MM-DD格式字符串，如value="2024-06-15"；传"15/06/2024"或"2024-6-15"会导致清空或无效 - 服务端必须二次校验，因为前端限制可被绕过
需要兼容老浏览器？别硬扛，用轻量 JS 库兜底
如果目标用户包含大量 iOS 13/Safari 13 用户，或企业内网还在用旧版 IE（虽已淘汰，但某些政企系统仍在），input type="date" 无法满足基本交互需求。这时候加一个轻量 JS 日期选择器是更实际的选择，而不是自己手写日历逻辑。
推荐用 flatpickr（约 25KB gzip 后）或 vanillajs-datepicker（无依赖，纯 JS），它们不强制替换 DOM 结构，可绑定到已有 input 元素上，且保留原生表单行为（如 form.checkValidity() 仍可用）。
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 引入后只需初始化：
flatpickr("#myDateInput", { dateFormat: "Y-m-d" }); - 注意：这些库默认输出的日期格式通常和
input type="date"一致（YYYY-MM-DD），避免后端解析失败 - 若项目已用 React/Vue，优先使用对应生态的组件（如
@headlessui/react的Datepicker），而非全局脚本
input type="date" 的 value 值不是 Date 对象，别直接丢给 new Date()
很多人在 JS 中取值时写 new Date(input.value)，结果在某些时区下得到前一天或后一天。这是因为 input.value 返回的是 UTC 零点的 YYYY-MM-DD 字符串，而 new Date("2024-06-15") 会被解释为本地时区的午夜，跨时区就偏移了。
正确做法是明确按“年-月-日”拆解再构造：
const dateStr = input.value; // "2024-06-15"
const [y, m, d] = dateStr.split("-").map(Number);
const date = new Date(y, m - 1, d); // 注意 month 是 0-based- 不要依赖
Date.parse()或构造函数直传字符串，行为不一致 - 如需 ISO 字符串用于 API，用
date.toISOString().split("T")[0]确保仍是YYYY-MM-DD - 表单提交前检查
input.checkValidity()，它对type="date"有效（即使用户手动输入非法值也会返回 false）
移动端真机测试比桌面端更重要
桌面 Chrome 模拟移动设备的日期选择器，和真实 iOS/Android 上的行为差异很大。比如：iOS 的 input type="date" 不支持 step 属性，也无法通过 CSS 定制弹出样式；部分安卓厂商定制 ROM 会禁用原生控件，回退成文本输入。
最容易被忽略的一点：在 iOS Safari 中，如果页面 <input> 被包裹在 position: fixed 或 transform 容器里，日期选择器弹出位置可能错乱甚至不可见。
- 真机测试时重点看：点击是否唤起系统选择器、能否滚动年份、确认后值是否正确写入
value - 避免对
input[type=date]使用appearance: none或复杂伪元素覆盖，会破坏可访问性且在 Safari 下失效 - 如果产品必须支持微信内置浏览器（X5 内核），它对
type="date"支持极差，必须 JS 兜底
