HTML5 date 输入框的 min/max 属性必须用 YYYY-MM-DD 格式字符串设置，缺位补零；动态修改需直接赋值 el.min = "..."，注意空值处理、iOS 刷新问题及服务端二次校验。
HTML5 input[type="date"] 的 min 和 max 属性怎么写
直接用 min 和 max 属性就能限定日期范围，但必须严格按 YYYY-MM-DD 格式写字符串，否则浏览器会忽略。比如想限制只能选 2023 年内的日期，就得写成：
<input type="date" min="2023-01-01" max="2023-12-31">
注意：min/max 值不能只写年份或年月，缺位补零是硬性要求——"2023-1-1" 或 "2023-01-1" 都无效。
- 浏览器原生校验只在表单提交时触发，不阻止用户手动输入或粘贴非法值（需配合 JS 补充验证）
- 某些旧版 Safari 对
min/max支持不完整，建议测试目标环境 - 如果初始
value超出范围，Chrome 会清空输入框，Firefox 可能保留但标为无效
如何用 JavaScript 动态设置日期范围
当需要根据用户操作实时更新可选范围（比如“结束日期不能早于开始日期”），就得用 JS 操作 min/max 属性：
const startDate = document.getElementById("start");<br>const endDate = document.getElementById("end");<br><br>startDate.addEventListener("change", () => {<br> endDate.min = startDate.value;<br>});
关键点：
立即学习“前端免费学习笔记（深入）”；
-
endDate.min必须是字符串，且格式合法；如果startDate.value为空，赋值后会导致endDate无法选择任何日期 - 不要用
setAttribute，应直接赋值给 DOM 属性（el.min = "..."），否则可能不触发 UI 更新 - 移动端 iOS 的 date picker 在动态改
min后可能不刷新可选范围，需重新聚焦再失焦一次（endDate.focus(); endDate.blur();）
为什么设置了 min/max 还能选到范围外的日期
常见原因不是代码写错，而是这些细节被忽略：
- 用户通过键盘手动输入（如
2025-01-01），浏览器不会实时拦截，只在checkValidity()或提交时报错 - 服务器返回的日期字符串带有时区或时间部分（如
"2023-01-01T00:00:00Z"），直接赋给min会失效——得先截取前 10 位：dateString.slice(0, 10) - CSS 或 JS 覆盖了原生控件样式（比如用伪元素隐藏了日期箭头），可能导致部分浏览器跳过范围校验逻辑
- 使用了
inputmode="numeric"或其他属性干扰了 type=date 的行为
兼容性差时的降级方案
当目标环境（如微信内置浏览器、老版本 Android WebView）对 input[type="date"] 支持弱，或需要更精细控制（如禁用周末、节假日），就得放弃原生控件：
- 用纯 JS 日期选择器库，比如
flatpickr或dayjs + 自定义渲染，它们提供disable、onDayCreate等钩子 - 服务端永远要二次校验：前端限制只是体验优化，
min/max完全不可信 - 若仅需简单范围，可用
input[type="text"]+ 正则 +pattern提示，但失去原生日期键盘和无障碍支持
最常被漏掉的一点：min/max 是 HTML 属性，不是 CSS，也不受 !important 影响；它只作用于该元素，无法用 class 批量控制。
