HTML原生不支持为设置step属性,因其非线性;应使用JavaScript解析ISO周格式并基于Date对象增减7天后反推标准周字符串,避免字符串硬拼导致跨年错误。

HTML原生不支持step属性
直接给 <input type="week"> 加 step 属性是无效的——浏览器会忽略它。这是 HTML 规范明确规定的:step 对 week 类型无意义,因为周数(如 "2024-W23")不是线性数值,无法用整数步长递增。
用JavaScript手动控制周数增减逻辑
真正可控的方式是放弃依赖原生步进,改用按钮 + 脚本计算下周/上周。关键点在于正确解析和构造 ISO 周格式(YYYY-Www),注意跨年、跨月边界:
-
new Date()不能直接解析"2024-W23",需先转成日期再推算 - 推荐用
tempDate.setDate(tempDate.getDate() + 7)计算下一周,再用getISOWeekYear()和getISOWeek()反推标准格式 - 避免手动拼字符串,比如把
"2024-W52"直接加1变成"2024-W53"——2024 年根本没有第53周
示例核心逻辑:
function addWeek(weekStr) {
const [year, week] = weekStr.split('-W').map(Number);
const date = getMondayOfISOWeek(year, week);
date.setDate(date.getDate() + 7);
return `${date.getFullYear()}-W${String(getISOWeek(date)).padStart(2, '0')}`;
}
兼容性与用户体验取舍
所有现代浏览器都支持 type="week",但安卓 WebView 和旧版 Safari 的周选择器体验差(甚至只显示文本框)。如果你需要稳定步进交互,更务实的做法是:
立即学习“前端免费学习笔记(深入)”;
- 用
<input type="text">配合自定义日期picker库(如 flatpickr + 周模式插件) - 或退化为两个
<select></select>:一个选年份,一个选周数(1–53),并动态校验该年最大周数(new Date(year, 11, 31).getISOWeek()) - 禁用原生
week输入的键盘输入,只允许点击按钮修改,防止用户输错格式
为什么不用正则+parseInt强行步进字符串
看似简单:提取 W23 中的 23,加1得 24,再拼回去。但问题立刻暴露:
- 输入是
"2024-W52"→ 输出"2024-W53"(非法) - 输入是
"2023-W52"→ 下周其实是"2024-W01",年份要变 - ISO 周规则复杂:每年第一周必须包含周四,所以 2024 年第1周从 2023-12-31 开始
绕过日期对象直接字符串操作,等于自己重写 ISO 周算法——不值得,也容易出错。
真正可靠的周步进,始终要落到 Date 实例上做加减,再映射回 ISO 周字符串。这点容易被忽略,但跳过去就会在年底上线后收到一堆“选不了2025-W01”的报错。



















