step 属性对 无效，HTML 规范明确将其定义为“不适用”，浏览器均忽略该属性，无法实现日期间隔选择或限制。
step 属性对 <input type="date"> 无效
直接说结论：step 属性在绝大多数浏览器中对 <input type="date"> 不起作用。你写 <input type="date" step="7">，浏览器仍允许用户选择任意一天，不会跳过、禁用或限制为每周一/每七天一个选项。
这是 HTML 规范明确规定的：对于 date 类型，step 被忽略（规范中定义为“不适用”）。只有 datetime-local、month、week 等部分类型才真正支持 step，且行为也受限。
常见错误现象包括：
- 开发者在 Chrome/Firefox/Safari 中测试
step="7"，发现日期选择器滑块或日历无任何变化 - 表单提交后校验通过，但业务上需要“只能选每周五”，
step完全没拦住非法值 - 误以为
step能生成间隔选项列表（如“2024-04-05, 2024-04-12, 2024-04-19…”），实际它只影响键盘上下键微调（而 date 类型根本不响应上下键）
替代方案：用 min/max + JavaScript 校验
要实现“仅允许选择每周五”或“间隔 7 天的日期”，必须组合使用属性约束和脚本控制：
立即学习“前端免费学习笔记（深入）”；
-
min和max可限定可选范围，但不能表达周期性间隔 - 监听
input或change事件，用 JS 检查用户输入是否符合规则（例如new Date(value).getDay() === 5） - 若不符合，清空值或提示，并调用
setCustomValidity()阻止表单提交 - 可配合
pattern属性（但注意：date 输入不触发 pattern 校验，仅适用于 text 类型）
示例逻辑片段：
const dateInput = document.querySelector('input[type="date"]');
dateInput.addEventListener('change', () => {
const d = new Date(dateInput.value);
if (d.getDay() !== 5) { // 只允许周五
dateInput.setCustomValidity('请选择周五');
} else {
dateInput.setCustomValidity('');
}
});
想用原生 UI 实现间隔选择？换 type 或用第三方库
如果目标是让用户直观看到并选择“每 7 天一个点”的日期（比如课程排期、体检预约），原生 <input type="date"> 无法满足。可行路径有：
- 改用
<input type="week">：它支持step（单位为周），例如step="2"表示每两周一个选项；但用户选的是“第几周”，不是具体日期，需后端解析 - 改用
<input type="text">+ 日期格式正则 + 自定义日历组件（如 flatpickr、Pikaday），这些库支持disable配置数组或函数，可动态禁用非间隔日 - 服务端始终做最终校验：前端限制只是体验优化，关键业务逻辑（如“预约日必须是周一”）必须在后端重复验证
为什么不要依赖 step 做业务规则控制
step 的设计初衷是辅助输入精度（如金额保留两位小数、时间按 15 分钟粒度调整），不是业务规则闸门。它在 date 类型上被规范弃用，在其他类型中也存在兼容性陷阱：
- Firefox 对
datetime-local的step支持不一致（某些版本忽略） - 移动端 iOS Safari 的 date picker 完全不暴露 step 行为
- 屏幕阅读器和键盘导航用户可能绕过所有前端限制，直接输入任意合法格式字符串
真正需要间隔控制时，别试图用 step “蒙混过关”——该写 JS 就写，该调 API 就调，该后端兜底就兜底。
