step 属性对 input type="date" 无效，html 规范未定义其行为，所有主流浏览器均忽略；仅对 type="number"、type="range"、type="datetime-local" 有效，且无法实现周粒度选择；type="week" 兼容性差、无原生选择器、需额外解析，不推荐使用。
step 属性对 input type="date" 无效，别白试了
想用 step="7" 让日期选择器按周跳转？浏览器根本不认。HTML 规范里明确写了：step 对 type="date" 没定义行为，所有主流浏览器（Chrome、Firefox、Safari）都忽略它，点一次还是跳一天。
真正能控制“周粒度选择”的只有 JavaScript 手动干预
得放弃原生 input type="date" 的幻想，改用 input type="text" + 自定义逻辑。核心思路是：拦截用户输入/点击，只允许选中星期一（或你定的基准日），然后自动跳到下一周/上一周。
常见做法：
- 绑定
click和keydown事件，禁用键盘直接输日期 - 用
new Date().setDate()算出最近的周一，再加减 7 天递推 - 显示格式保持
YYYY-MM-DD，方便后端解析，别用中文“第X周”这种 - 配合一个日历弹层（比如 flatpickr 或原生
<dialog></dialog>）比纯文本体验好得多
step 在哪些 input 类型上才真起作用？
它只对数值类类型有明确定义：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
type="number"：step="7"表示每次增减按钮点一下加减 7 -
type="range"：滑块只能停在 0、7、14、21… 这些刻度上 -
type="datetime-local"：step="60"表示秒级精度（单位是秒），但注意：它不能设成step="604800"（一周秒数）来跳周——浏览器会静默降级为step="1"
也就是说，没有一种原生 input 能靠 step 实现“周选择间隔”，这是 HTML 标准的硬性限制。
用 week 类型？别踩这个兼容性坑
有人翻文档看到 type="week"，以为能解决问题。现实是：
- 它只显示“2024-W23”这种格式，不提供任何选择器 UI，用户得手动输
- Chrome 支持但没日历弹窗；Firefox 完全不渲染控件，退化成普通文本框；Safari 不支持
- 后端收到的是字符串，还得额外解析成日期范围（比如周一到周日），徒增复杂度
真要交付，别碰 type="week"。用 type="text" + JS 控制 + 可选第三方日历库，才是稳的路子。
最易被忽略的一点：周起始日（周一是多数系统默认，但有些地区是周日），这个逻辑必须和后端约定一致，否则前端算的周一，后端当成周日处理，数据就偏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
