HTML原生不支持星期选择，type="date"仅选日期，type="week"兼容性差、值难处理；推荐用type="date"+JS计算周范围，需明确定义周起始（如周一/周日/ISO周）并统一时区。
HTML原生不支持星期选择
浏览器原生的 <input type="date"> 只能选年月日，没有“星期几”或“第几周”的语义能力。所谓“星期选择”，实际是让用户选一个日期，再由 JS 推算出它所属的星期（如周一到周日）或 ISO 周编号（2024-W23）。强行用 type="week" 虽然存在，但兼容性差、UI 不统一、值格式难处理（返回类似 "2024-W23"），且无法限制只显示“周起始日”或自定义周范围。
用 type="week" 的真实表现和坑点
它确实会触发浏览器周选择器（Chrome / Edge 支持较好，Safari 仅部分支持，Firefox 完全不支持），但返回值是 ISO 周字符串，例如："2024-W23"。问题在于：
- 用户看到的是“2024 年第 23 周”，不是“6 月 10 日～6 月 16 日”这种可读范围
- 提交后后端需额外解析该字符串才能得到日期区间，容易出错
- 无法设置最小/最大周（
min/max属性只接受同格式字符串，但生成合法值需手动计算） - 移动端体验割裂：iOS Safari 直接降级为文本框，无选择器
推荐做法：用 type="date" + JS 计算星期范围
更可控、兼容性好、语义清晰。核心逻辑是：用户选一个日期 → 触发 change 事件 → JS 算出该日期所在周的周一和周日（或按你定义的“周起始”，比如周日）→ 更新隐藏字段或展示范围。
关键步骤：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 保留
<input type="date" id="date-picker">作为交互入口 - 监听
change事件，获取valueAsDate - 用 JS 计算本周一（假设周一是每周起点）：
function getMonday(d) { const date = new Date(d); const day = date.getDay(); const diff = date.getDate() - day + (day === 0 ? -6 : 1); // 周日转为上一周一 return new Date(date.setDate(diff)); } - 生成范围字符串，例如：
mon.toISOString().split('T')[0] + ' ~ ' + sun.toISOString().split('T')[0] - 把结果写入另一个
<input type="hidden">或显示在<output></output>中供提交
周期筛选（如“最近 4 周”“本季度”）要自己实现
HTML 没有内置周期筛选能力。必须用 JS 构造时间范围：
- “最近 4 周”：取今天所在周一，往前推 3 周，得到起始周一；当前周日为结束
- “本季度”：根据月份判断属于 Q1–Q4，再算出该季度首日和末日（如 Q2 是 4 月 1 日到 6 月 30 日）
- 所有计算建议用
new Date()+ 手动 setMonth/setDate，避免依赖外部库；若项目已用 Day.js 或 Luxon，可用.startOf('week')或.endOf('quarter') - 注意时区：
valueAsDate和toISOString()都基于本地时区，后端接收时需明确约定时区（推荐统一用 UTC 存储）
真正麻烦的不是选星期，而是“周”的定义——你的业务按周日开始？还是周一？是否采用 ISO 周？这些逻辑一旦定错，前后端日期对不上，排查起来特别隐蔽。
