原生<input type="date">支持现代浏览器，需用oninput监听、YYYY-MM-DD格式值，并用JS校验禁用日期；复杂需求应选flatpickr等轻量库，且服务端必须二次校验。
用 <input type="date"> 就能搞定基础需求
现代浏览器（Chrome 20+、Firefox 57+、Safari 14.1+、Edge 79+）原生支持 <input type="date">，点开就是本地化日历面板，无需 JS 或 CSS。它自动适配系统语言和时区，回车确认、键盘方向键导航都可用。
常见错误是手动绑定 onchange 却忽略 oninput：用户用键盘输入日期时，onchange 不触发（只在失焦时触发），导致实时校验失败。应优先监听 oninput。
注意两点：
-
value必须是YYYY-MM-DD格式字符串，传"2024/05/20"或"2024-5-20"都会清空输入框 - 不支持设置最小/最大日期以外的限制（比如禁用周末、节假日），这类逻辑必须靠 JS 拦截 + UI 提示
- 在 Safari 14–15 中，
min/max属性对弹出日历的可选范围控制不稳定，建议额外用 JS 校验提交值
禁用特定日期得靠 JavaScript 拦截
原生 <input type="date"> 不提供“禁用某天”能力。要实现节假日灰掉、周末不可选，只能用 JS 拦截用户操作并反馈。
立即学习“前端免费学习笔记（深入）”；
核心思路是监听 input 和 blur 事件，校验 value 是否在允许范围内：
const input = document.querySelector('input[type="date"]');
const disabledDates = new Set(['2024-05-01', '2024-10-01']);
input.addEventListener('input', () => {
if (disabledDates.has(input.value)) {
input.setCustomValidity('该日期不可选');
} else {
input.setCustomValidity('');
}
});
input.addEventListener('blur', () => {
if (input.value && disabledDates.has(input.value)) {
input.value = ''; // 清空非法值
}
});
关键细节：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
setCustomValidity触发后，表单提交会被阻止，且浏览器默认显示红色提示气泡 - 不能只靠
input事件——用户可能用鼠标点选日历后直接关闭面板，此时value已变但没触发input，所以blur是兜底 - 禁用逻辑无法让日历面板里的日期变灰，视觉上仍可点；真正“禁用”需换第三方日历组件
需要自定义样式或功能？选轻量库比手写更稳
想改颜色、加农历、支持范围选择、禁用逻辑可视化，硬套原生 input 很吃力。这时候该考虑轻量 JS 库，而非全功能框架组件。
推荐两个方向：
-
flatpickr：仅 18KB（gzip），无依赖，支持禁用日期数组、函数判断、中文 locale、键盘操作。通过disable选项能让日历里对应日期置灰不可点 -
air-datepicker：体积稍大（~30KB），但 API 更直觉，内置多语言、周起始日、快捷按钮（今天/清空）
避坑提醒：
- 别用 jQuery 插件（如
datepicker）——jQuery 已过时，且这些插件常带全局 CSS 冲突 - 避免引入
fullcalendar这类重型日程库——它为事件管理设计，做单日期选择是杀鸡用牛刀，体积超 200KB - 所有第三方日历都依赖
<input>或自定义容器，务必测试移动端 touch 事件是否正常响应
移动端兼容性仍是最大现实约束
iOS Safari 直到 16.4 才完整支持 min/max 在弹出日历中的限制，旧版本即使写了也会无视。Android WebView 表现更碎片化，部分厂商定制系统会替换原生日历为自家 UI，行为不可控。
这意味着：
- 不能假设用户看到的日历和你开发时一致
- 提交前必须用 JS 校验：
new Date(input.value)是否有效、是否在业务要求范围内 - 如果业务强依赖日期禁用（如租车不可选还车日当天），原生方案不可靠，必须用
flatpickr等可控组件，并关闭其原生输入框（inline: false+altInput: true）
最易被忽略的一点：服务端永远要做二次校验。前端禁用只是体验优化，绕过 JS 的请求随时可能发生。
