原生input[type="week"]在chrome、edge和safari 16.4+中可用，返回iso格式"yyyy-www"字符串，firefox不支持需降级；须用startofweek等正确解析周范围，vue/react中需注意事件绑定与受控处理。
HTML原生不支持week输入类型，但input[type="week"]在现代浏览器中可用
直接写 <input type="week"> 就能唤起系统级周选择器（Chrome、Edge、Safari 16.4+），但 Firefox 完全不支持，且返回值格式固定为 "YYYY-Www"（如 "2024-W23"），不是日期范围。面试时被问到“怎么实现周选择器”，第一反应不该是手写日历组件，而是先确认：是否允许用原生方案？兼容性要求到哪一级？
常见错误现象：input[type="week"] 在 Vue/React 中绑定 v-model 或 value 后无法更新；或者开发者误以为它会返回周一和周日两个日期，结果拿到的是字符串，解析失败。
- 必须设置
name和id，否则部分表单库无法识别 - 默认值需符合
YYYY-Www格式，new Date().toISOString().substring(0, 7)不行，得用getWeekYearAndNumber()类函数计算 - Safari 对
min/max属性支持不稳定，设了可能无效
用 JavaScript 补齐 Firefox 兼容性和日期范围转换
Firefox 不渲染 input[type="week"]，会退化成普通文本框。不能只靠 CSS 隐藏再替换 DOM，而应检测支持性后动态处理：
if (!HTMLInputElement.prototype.hasOwnProperty('valueAsNumber') ||
!('week' in document.createElement('input').getAttributeNames?.())) {
// 降级为自定义周选择器（比如基于 datepicker 改造）
}
更关键的是语义转换：用户选中 “2024-W23”，业务通常需要这周的周一（2024-06-03）和周日（2024-06-09）。别用正则硬拆 2024-W23 然后算第 23 周——ISO 周和日历年不总对齐，得用 Intl.DateTimeFormat 或 date-fns/startOfWeek。
-
date-fns推荐用startOfWeek(parseISO("2024-W23"), { weekStartsOn: 1 })，明确指定周一为周首 - 纯 JS 实现要小心：1月1日可能属于上一年的第 52 或 53 周，
new Date(2024, 0, 1).getDay()不足以判断 - 后端接收时，务必约定传
start_date和end_date字段，而非原始week字符串
Vue/React 中封装可复用的 WeekPicker 组件要注意的坑
框架里直接套 input[type="week"] 很容易翻车。Vue 的 v-model 默认监听 input 事件，但 week 输入框触发的是 change；React 的受控组件若没同步 value，选完就回退为空。
实操建议：
- Vue：用
:value+@change，别用v-model；值为空时传""，不要传null或undefined - React：确保
value是字符串且格式正确，onChange里用e.target.value取值，别依赖onSelect - 都得加
onInvalid处理手动输入非法格式（如 "2024-W0"）的情况
为什么别急着手写日历网格？先看需求边界
很多面试者一上来就画表格、算年月日、监听点击，但实际项目里，“周选择器”往往只需要满足三个条件：选中某周、显示周区间文案（如“2024-06-03 至 2024-06-09”）、提交时转成两个日期字段。原生 input[type="week"] 加轻量 JS 转换，80% 场景已够用。
真正要手写的场景其实很窄：需要禁用某些周（如节假日周）、要支持跨年周切换动画、或设计规范强制统一 UI 且必须兼容 IE —— 这些时候才该引入 react-datepicker 改造成周模式，或用 flatpickr 配置 mode: "week"。
最容易被忽略的一点：周的定义。中国习惯周一是第一天，但 en-US locale 下 startOfWeek 默认是周日。不显式传 { weekStartsOn: 1 }，同一周在不同 locale 下会算出不同日期范围。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
