input type="week" 返回ISO 8601格式字符串“YYYY-Www”，如“2024-W23”，表示以周一为起点的一周；不支持valueAsNumber，需用value取值；Safari等浏览器不支持，须降级处理；可解析为周一至周日日期范围。

input type="week" 的基本用法和值格式

input type="week" 会渲染成一个周选择器（支持的浏览器中），用户选中后返回形如 "2024-W23" 的字符串，即“年-第W周”格式（ISO 8601 标准）。这个值不是日期，而是以周一为每周起点、按 ISO 周编号规则计算的一周范围。

• 值始终是 7 位字符串："YYYY-Www"，例如 "2024-W01" 表示 2024 年第一周（2024-01-01 是周一，所以这一周从那天开始）
• 浏览器自动校验格式，非法输入（如 "2024-W54" 在非闰年可能无效）会被视为无效值
• valueAsNumber 不可用，该类型不支持数值解析；必须用 value 取字符串再处理

常见兼容性问题与 fallback 方案

不是所有浏览器都支持 input type="week"：Safari 目前（截至 2024）完全不支持，旧版 Edge 和部分安卓 WebView 也回退为普通文本框。

• 检测是否原生支持：document.createElement('input').type = 'week' 后检查 type 是否仍为 "week"（不支持时会 fallback 到 "text"）
• 真实项目中建议搭配 JavaScript 库（如 flatpickr 或 vanilla-picker）做降级，或手动用两个 input type="number" 分别选年份和周数（需自行验证周数合法性）
• 不要依赖 :valid/:invalid 伪类做 UI 提示——Safari 下永远显示为 :valid，因为输入被当作文本处理

如何从 week 值解析出具体日期范围

input type="week" 的值本身不包含具体日期，但可按 ISO 8601 规则推算出该周的周一和周日：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 第一步：拆解 value 得到年份 Y 和周数 W
• 第二步：计算该年第一个周四（ISO 周定义依赖周四所在周为当年第 1 周），再反推周一
• 简单可靠做法是用 new Date() 配合已知算法，例如：

function weekToDateRange(weekStr) {
  const [year, week] = weekStr.split('-W').map(Number);
  const jan1 = new Date(year, 0, 1);
  const dayOfYear = (8 - jan1.getDay()) % 7 + (week - 1) * 7;
  const monday = new Date(year, 0, dayOfYear);
  const sunday = new Date(monday);
  sunday.setDate(monday.getDate() + 6);
  return { monday, sunday };
}

注意：这个计算依赖本地时区，若需 UTC 时间，应使用 getUTCFullYear() 等方法并统一处理。

立即学习“前端免费学习笔记（深入）”；

表单提交与后端接收注意事项

• 提交时，input type="week" 的值作为普通字符串字段发送，无特殊编码
• 后端收到的仍是 "2024-W23" 这种格式，Python/Java/.NET 等主流语言需自行解析（不要当成日期直接 parse）
• 数据库存储建议拆成两个字段：year 和 week_number（整型），避免字符串模糊查询和索引低效
• 若需存为时间范围，推荐存周一 00:00:00 和周日 23:59:59 的 UTC 时间戳，而非依赖前端生成的本地时间

ISO 周的计算逻辑容易被低估——比如 2023-12-31 是 2024 年第 1 周的周日，这种跨年情况必须用标准算法，手写加减极易出错。