原生 <input type="week"> 不具备可靠跨浏览器支持且返回 ISO 周格式字符串，无法直接获取周一至周日具体日期；推荐用 <input type="date"> 结合 JS 计算周范围，兼容性好、可控性强。
用 <input type="date"> 无法直接选星期，得自己处理
HTML 原生 <input> 没有 type="week" 的可靠跨浏览器支持——Chrome 和 Edge 虽然识别 type="week"，但 Safari 完全不渲染控件，Firefox 则当普通文本框。更关键的是，即使显示为周选择器，它返回的是形如 "2024-W23" 的字符串，不是你想要的“周一至周日”日期范围，也不带年月日具体值。
type="week" 的实际行为和兼容性陷阱
如果你硬写 <input type="week">：
- Chrome/Edge 会显示一个带年份+第几周的下拉（例如
2024-W23），点选后value是 ISO 周格式字符串，valueAsDate返回 null - Safari 渲染成纯文本框，用户可手动输入任意内容，无校验、无交互提示
- Firefox 忽略
type，退化为text，且不触发任何周相关逻辑 - 无法通过
min/max精确限制“某一周的起止日期”，因为它是按周编号而非日期比较
推荐做法：用 <input type="date"> + JS 计算星期范围
真正可控的方式是让用户选一个日期（比如任意一天），然后用 JS 推出该周的周一和周日。这样兼容所有现代浏览器，语义清晰，也方便后续提交具体日期。
示例逻辑（ES6）：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
function getWeekRange(date) {
const d = new Date(date);
const day = d.getDay(); // 0=Sun, 1=Mon, ..., 6=Sat
const diffToMonday = day === 0 ? -6 : 1 - day;
const monday = new Date(d);
monday.setDate(d.getDate() + diffToMonday);
const sunday = new Date(monday);
sunday.setDate(monday.getDate() + 6);
return {
start: monday.toISOString().split('T')[0], // "2024-06-10"
end: sunday.toISOString().split('T')[0] // "2024-06-16"
};
}绑定到 input：
<input type="date" id="date-picker">
<div id="week-display"></div>
<p><script>
document.getElementById('date-picker').addEventListener('change', e => {
const range = getWeekRange(e.target.value);
document.getElementById('week-display').textContent =
<code>本周：${range.start} 至 ${range.end}</code>;
});
</script>如果必须用纯 HTML/CSS，就别依赖原生控件
真要零 JS，只能放弃“选星期”的抽象概念，改用显式控件组合：
- 用
<select>列出“本周”“下周”“上一周”等相对选项，后端或 JS 再算具体日期 - 用 7 个
<input type="checkbox">标明周一至周日，适合多选场景（如排班） - 用两个
<input type="date">分别标“开始日期”和“结束日期”，加 JS 限制为同周（否则用户可能乱填）
原生 type="week" 表面省事，实则埋坑；真正落地时，日期计算逻辑躲不掉，不如一开始就控制在 JS 里做干净。
