HTMLweek输入类型使用教程

HTML 的 `input[type="week"]` 是一个看似简洁实则暗藏陷阱的原生控件：它严格遵循 ISO 8601 周标准（格式为 `YYYY-Www`），以周一为每周起点，且第1周必须包含当年第4个星期四——这意味着选“2024-W01”可能实际涵盖2023年12月25日，极易引发跨年解析错误；更棘手的是，min/max 属性若未严格匹配 `YYYY-Www` 格式将静默失效，Firefox 完全不支持，Safari 仅新版本有限兼容，而主流日期库也无法直接解析该字符串——你不得不手动实现健壮的周到日期范围转换，并在服务端二次校验。想用好它？先直面兼容性、格式陷阱与跨年边界问题，否则看似省力的选择器，反而会成为线上 bug 的温床。

type=week 的基本行为和格式要求

浏览器原生 input[type="week"] 会渲染为一个带周选择器的输入框，但它的值始终是 YYYY-Www 格式（如 "2024-W23"），不是日期范围，也不代表某天。它选的是 ISO 8601 定义的“第几周”，起始日固定为周一，且第 1 周必须包含当年至少 4 个星期四——这意味着 2024 年第 1 周实际从 2023-12-25 开始。

这个格式不能直接传给后端做日期计算，也不能用 new Date() 解析；很多日期库（如 dayjs、date-fns）也不原生支持 YYYY-Www 字符串解析，得手动转换。

常见错误：把 week 值当日期用或误设 min/max

直接写 <input type="week" min="2024-01-01"> 是无效的：min 和 max 属性必须匹配 input 自身的值格式，即 YYYY-Www，否则浏览器会忽略。

• min="2024-W01" ✅ 合法
• min="2024-01-01" ❌ 浏览器静默失效，控制台无报错
• value="2024-06-10" ❌ 设置后输入框显示为空或 fallback 到当前周

另外，step 默认是 1（周），设成 step="2" 表示每次增减 2 周，但不支持小数或非整数值。

获取对应周一和周日的 JavaScript 转换方法

拿到 input.value（如 "2024-W23"）后，需解析出该周的周一和周日日期。关键点在于：ISO 周的“第 1 天”永远是周一，且该周必须包含当年第 4 个星期四。

简单可靠的做法是用 Intl.DateTimeFormat + getWeekYear 配合构造日期：

function weekToDateRange(weekStr) {
  const [year, week] = weekStr.split('-W').map(Number);
  const jan1 = new Date(year, 0, 1);
  const daysToFirstThursday = (4 - jan1.getDay() + 7) % 7;
  const firstThursday = new Date(jan1);
  firstThursday.setDate(jan1.getDate() + daysToFirstThursday);
  const firstWeekStart = new Date(firstThursday);
  firstWeekStart.setDate(firstThursday.getDate() - 3);
  const targetMonday = new Date(firstWeekStart);
  targetMonday.setDate(firstWeekStart.getDate() + (week - 1) * 7);
  const targetSunday = new Date(targetMonday);
  targetSunday.setDate(targetMonday.getDate() + 6);
  return { monday: targetMonday.toISOString().split('T')[0], sunday: targetSunday.toISOString().split('T')[0] };
}
// weekToDateRange("2024-W23") → { monday: "2024-06-03", sunday: "2024-06-09" }

注意：不要依赖 Date.parse() 或正则硬拆，因为跨年周（如 "2024-W01" 可能含 2023-12-25）会导致年份错位。

兼容性和 fallback 方案

Firefox 目前完全不支持 type="week"，Safari 仅部分支持（iOS 16.4+ 才有原生选择器），旧版 Chrome 会降级为文本输入框。别指望样式统一或事件一致。

若需强兼容，建议：

• 用 type="text" + 自定义周选择弹层（如 flatpickr 插件开启 weekNumbers: true）
• 服务端接收时必须校验 YYYY-Www 格式，不能只信前端传来的字符串
• 提交前用 JS 检查 input.checkValidity()，但要注意 Firefox 下永远返回 true（因不识别该 type）

真正麻烦的不是怎么选，而是怎么让不同浏览器下“选出来的周”语义一致——尤其跨年周和边界周（W52/W53）容易算错一天。

以上就是《HTMLweek输入类型使用教程》的详细内容，更多关于的资料请关注golang学习网公众号！