step 属性对 <input type="date"> 无效，浏览器必须忽略非默认值（86400），无法实现日期间隔限制；需用 JavaScript 结合 setCustomValidity 等进行校验。
step 属性对 <input type="date"> 无效
直接说结论：step 属性在大多数浏览器中对 <input type="date"> **没有实际作用**。HTML 标准允许它存在，但规范明确指出：对于 date 类型，step 的默认值是 86400（即 1 天），且浏览器**必须忽略**你设置的其他值（比如 step="7" 或 step="30"）。Chrome、Firefox、Safari 均按此执行——设了也白设。
为什么不能用 step 限制日期间隔？
根本原因在于 date 输入控件的语义是“选择一个完整日期”，不是“选择某个时间点的离散刻度”。它的底层单位是“天”，且 UI（如日历弹出层）天然以日为粒度交互。即使你写 step="7"，浏览器既不会禁用非 7 天倍数的日期，也不会让日历只显示周日——它会照常渲染全部日期，且用户仍可点击任意一天。
-
step在type="number"或type="time"中才真正生效 - W3C 规范中，
date的step被定义为“仅用于计算步进值，不改变 UI 或验证行为” - 试图靠
step实现“只能选每月 1 号”或“每两周选一次”属于误用
替代方案：用 JavaScript + min/max + 自定义校验
真要限制可选日期（比如只允许每月第一天、或只允许工作日、或间隔 N 天），必须靠 JS 控制。核心思路是：拦截输入、校验值、手动重置或提示。
- 监听
input或change事件，用new Date(value)解析用户选的日期 - 检查是否符合规则（例如：
date.getDate() === 1判断是否为每月 1 号） - 不符合时，调用
inputElement.setCustomValidity("只能选每月第一天")并触发reportValidity() - 也可直接重置
value（但需注意 UX，避免用户操作被无声吞掉）
示例（只允许每月 1 号）：
立即学习“前端免费学习笔记（深入）”；
<input type="date" id="myDate">
<script>
const el = document.getElementById('myDate');
el.addEventListener('change', () => {
const d = new Date(el.value);
if (d.getDate() !== 1) {
el.setCustomValidity('请只选择每月的第一天');
el.reportValidity();
el.value = ''; // 清空非法输入
} else {
el.setCustomValidity('');
}
});
</script>
别踩坑：min/max 和 value 的格式必须是 YYYY-MM-DD
min、max、value 属性对 date 输入框有效，但它们**严格要求字符串格式为 YYYY-MM-DD**（例如 "2024-06-15"），不能是 "2024/06/15" 或带时间部分的 ISO 字符串。
- 写成
min="2024-6-15"（缺前导零）会导致整个属性被忽略 - JS 中用
date.toISOString().split('T')[0]获取标准格式最稳妥 - 服务器返回的时间戳需先转成
Date对象，再格式化，不能直接拼接
这个格式问题比 step 更容易导致功能静默失效——页面看起来正常，但限制根本不生效。
