如何在HTML中使用 input type="week" 选择一年中的某一周-html教程-PHP中文网

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

$如何在html中使用 input type=\$

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 规则推算出该周的周一和周日：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

第一步：拆解 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() 等方法并统一处理。