HTML5原生支持周数输入的类型是type="week",格式为YYYY-W##(如2024-W24),符合ISO 8601标准;type="date"不支持周数。

HTML5 input type="date" 不支持周数输入
HTML5 原生 input 元素的 type="date" 只接受 YYYY-MM-DD 格式(如 2024-06-15),**完全不识别周数(如第24周、ISO周2024-W24)**。浏览器会直接拒绝非标准格式的值,或静默清空输入框。
input type="week" 是唯一原生支持周数的 HTML5 类型
它专用于表示“年+ISO周”,格式固定为 YYYY-W##(例如 2024-W24),且必须符合 ISO 8601 周定义(周一为每周第一天,第1周包含当年第一个周四)。
- 用户选择后,
value返回严格格式化字符串,如"2024-W24" - 设置初始值需用相同格式:
- 注意:Chrome / Edge 支持良好;Safari 仅从 macOS Ventura / iOS 16.4 起支持;Firefox 仍不支持(截至 2024 年中)
- 无法通过
step控制“跨周步进”,step="1"仅表示以周为单位增减(实际行为因浏览器而异)
JavaScript 中解析和生成 ISO 周数需手动计算
浏览器不提供内置 API 将日期转为 ISO 周(如 getWeek()),必须自行实现或依赖可靠逻辑。常见错误是简单用 getDay() 或忽略 ISO 规则导致第1周错位。
- 推荐使用已验证逻辑:先算出当年1月4日(保证属于第1周),再根据目标日期与该日差值推导周数
- 示例片段(获取日期对应 ISO 周):
function getISOWeek(date) { const thursday = new Date(date); thursday.setDate(date.getDate() + 4 - (date.getDay() || 7)); // 移动到本周四 const jan1 = new Date(thursday.getFullYear(), 0, 1); return Math.ceil((((thursday - jan1) / 86400000) + jan1.getDay() + 1) / 7); } - 生成
YYYY-W##字符串时,注意补零:date.getFullYear() + "-W" + String(getISOWeek(date)).padStart(2, "0")
服务端接收 week 输入时格式校验不能只靠正则
前端传来的 2024-W24 看似规范,但可能语义非法:比如 2024-W54 在 ISO 中并不存在(2024 年只有 52 周)。仅用 /^\d{4}-W\d{2}$/ 正则会放过无效周数。
立即学习“前端免费学习笔记(深入)”;
- 必须结合年份查 ISO 周总数(2023/2024/2025 分别有 52/52/53 周)
- 建议在服务端用成熟库处理,如 Python 的
datetime.strptime("2024-W24-1", "%G-W%V-%u")(%G和%V专用于 ISO 周) - 若自行解析,需验证周数是否 ≤ 当年最大 ISO 周(可通过计算当年12月28日所在周得到)
真正麻烦的是跨浏览器兼容性与 ISO 周的语义严谨性——week 输入控件看着简单,一旦涉及数据一致性、回显、编辑、服务端存取,每个环节都容易漏掉 ISO 定义细节。










