input[type="date"]的min/max属性需满足格式为YYYY-MM-DD、动态设置用setAttribute、联动时清空逻辑不可遗漏、手动输入仍需服务端校验四重条件,否则浏览器静默忽略。

input[type="date"] 的 min 和 max 属性能限制可选日期范围,但必须严格满足格式、赋值方式和校验逻辑三重条件,否则浏览器静默忽略——不是没写,是写了也白写。
min/max 值必须是纯 YYYY-MM-DD 字符串
浏览器只认形如 "2026-10-02" 的字符串。任何偏差都会导致整个属性失效:
-
new Date().toISOString()返回"2026-10-02T05:57:12.345Z",直接赋值给min会被丢弃;必须用.slice(0, 10)或.split('T')[0] - 手拼
"2026-10-2"(缺零)在字符串比较中会大于"2026-10-02",造成逻辑翻车 - 后端返回
"2026/10/02"或"02-10-2026",浏览器当没看见,checkValidity()返回false却不报错
动态设置必须用 setAttribute 或触发重绘
直接写 input.min = "2026-10-02" 在 Safari(尤其 iOS ≤ 15.5)和部分旧 Chrome 中,日历 UI 不刷新,用户仍能点选超限日期:
- 最稳妥方式:
input.setAttribute('min', '2026-10-02')—— 强制 DOM 属性变更,触发控件重绘 - 若用属性赋值,需补一手重绘:
input.dispatchEvent(new Event('input', { bubbles: true }))或input.focus(); setTimeout(() => input.blur(), 10) - 如果
input.value已存在且超出新max,浏览器不会自动清空,必须显式判断:if (input.value && input.value > input.max) input.value = ''
起止日期联动时 min 清空逻辑不能漏
做“结束日期不能早于开始日期”这类联动,只设 end.min = start.value 是不够的:
立即学习“前端免费学习笔记(深入)”;
- 监听
start的change事件:一旦start.value为空,必须执行end.min = ''或end.removeAttribute('min'),否则end将永远无法选择任何日期 - 监听
end的change事件:若end.value && start.value && end.value < start.value,需调用end.setCustomValidity('结束日期不能早于开始日期')并立即end.reportValidity() - 移动端 Safari 对
change触发不稳定,建议额外监听blur做兜底校验
max/min 不防手动输入,服务端必须二次校验
min/max 只控制日历 UI 和键盘导航,完全不限制粘贴、手动键入或禁用 JS 后的提交:
- 用户可以轻松输入
"2025-01-01"到一个max="2024-12-31"的input中,表单照样提交 - 前端应监听
input事件做实时校验:正则匹配格式 + 字符串比较范围,非法时清空或置灰提示 - 服务端收到
date字段后,必须重新解析并验证是否落在允许区间内——这是最后一道防线,不可省略
最容易被忽略的是:不同浏览器对 min/max 的视觉反馈不一致。Safari 可能灰掉超限项但允许输入,Chrome 禁用日历点击却不限制键盘。别假设用户只会点日历控件。



















