HTML5的date输入框通过min和max属性可直接限定日期范围，支持YYYY-MM-DD格式，浏览器自动禁用范围外选项；需配合JavaScript或服务端校验非法输入，并注意Safari兼容性及用户体验优化。
在HTML5中，date 类型的输入框可通过 min 和 max 属性直接限定用户可选的日期范围，无需JavaScript就能实现基础校验与界面限制。
设置 min 与 max 的基本写法
这两个属性接收符合 YYYY-MM-DD 格式的字符串值，浏览器会自动禁用范围外的日期选项（如日历控件中置灰不可点）：
- min：指定最早可选日期（含）
- max：指定最晚可选日期（含）
- 若只设其一，另一端默认无限制
示例：
<input type="date" min="2024-01-01" max="2024-12-31">
动态设置 min/max 的常见场景
静态写死适用于固定范围，但多数业务需根据当前时间或其它字段动态计算：
- “今天起30天内可预约”：用 JavaScript 设置
min为今天、max为30天后 - “出生日期不能晚于今天”：设
max为new Date().toISOString().split('T')[0] - “入职日期不得早于公司成立日”：将成立日硬编码为
min值
注意事项与兼容性提醒
这些属性在现代浏览器中支持良好，但需注意：
立即学习“前端免费学习笔记（深入）”；
- 仅对
type="date"、"month"、"week"等时间类型生效，"datetime-local"同样适用 - 不阻止用户手动输入非法值（如粘贴超范围日期），需配合 JavaScript 或服务端二次校验
- Safari 对
min/max的日历界面限制较弱，可能仍显示但禁止提交；建议加required并监听input或change事件做实时反馈
简单验证与用户提示补充
提升体验可结合原生约束 API：
- 调用
input.checkValidity()判断是否合规 - 使用
input.setCustomValidity("请选择2024年内的日期")自定义错误消息 - 监听
invalid事件，在提交失败时给出明确提示
