HTML代码中input标签类型为week的周数选择器写法-html教程-PHP中文网

type="week" 输入框的值为 iso 8601 周格式字符串（如"2024-w23"），需严格匹配 min/max，不支持 step；javascript 读写均用该字符串格式；safari 不支持，需降级方案；周数须按 iso 标准计算并校验合法性。

html代码中input标签类型为week的周数选择器写法

week 类型 input 的基础写法和值格式

input 的 type="week" 会渲染成原生周选择器，但它的值不是数字或日期对象，而是形如 "2024-W23" 的字符串（ISO 8601 周格式：年份 + "-W" + 两位数周号）。浏览器自动补零，比如第 5 周一定是 "2024-W05"，不能写成 "2024-W5"。

必须设置 value 属性才默认显示某周，且格式必须严格匹配
min 和 max 也需用同样格式，例如 min="2024-W01"
不支持 step 属性（Chrome 会忽略，Firefox 不识别）

<input type="week" value="2024-W23" min="2024-W01" max="2024-W53">

JavaScript 读取和设置 week input 的值

直接访问 input.value 得到的是字符串，比如 "2024-W23"；赋值时也必须传该格式字符串。不要尝试传 Date 对象或毫秒时间戳，否则清空或无效。

获取当前选中周：input.value（可能为空字符串，需判断）
设置为本周：input.value = new Date().toISOString().slice(0, 4) + "-W" + String(getISOWeek(new Date())).padStart(2, "0")（需自行实现 getISOWeek）
注意：不同浏览器对周起始日（周一/周日）和首周定义一致（ISO 标准），但渲染 UI 可能略有差异

week input 在不同浏览器中的兼容性和 fallback 方案

Safari 完全不支持 type="week"，会降级为普通文本框；旧版 Edge（EdgeHTML）也不支持。用户输入非法格式（如 "2024-W99"）时，input.checkValidity() 返回 false，但不会自动高亮错误。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

不要依赖样式伪类 ::webkit-inner-spin-button，它在 week 类型上不可控
若需兼容 Safari，建议用 type="text" + 手动校验 + 日历弹层（如 flatpickr），或服务端二次校验
用 Modernizr.inputtypes.week 或 document.createElement('input').type === 'week' 检测支持性

常见错误：周数计算偏差和时区陷阱

ISO 周数与日历周不等价：2024 年 1 月 1 日是周一，属于第 1 周；但 2023 年 12 月 31 日（周日）属于 2024 年第 1 周。直接用 date.getMonth() + 1 或 date.getDate() 推算周数必然出错。

浏览器内部按 UTC 计算周数，但显示受本地时区影响（例如北京时间用户看到的 “2024-W01” 实际对应 UTC 时间 2023-12-31 到 2024-01-06）
后端解析时务必按 ISO 8601 解析，别用 moment().week()（默认 locale 周起始），而要用 moment().isoWeek() 或 dayjs().isoWeek()
提交前建议用正则校验：^\d{4}-W\d{2}$，再结合库验证合法性（比如 week number 是否超出该年的最大周数）

实际使用时，最易被忽略的是：周选择器选中的“周”，代表的是该周的周一至周日范围，但 input 本身不暴露这个区间——你需要自己根据 value 解析出起止日期，否则无法做范围查询或高亮。