HTML中input标签type=week的周选择用法-html教程-PHP中文网

input[type="week"]值格式为yyyy-www（如"2024-w23"），代表iso周，起始日为周一，第1周须含当年第4个星期四；min/max需同格式，否则失效；需手动解析为周一至周日日期；firefox不支持，兼容性差。

html中input标签type=week的周选择用法

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 个星期四。

Wechat HTML Publisher

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

下载

简单可靠的做法是用 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）会导致年份错位。