很多人做“选中一天，显示整周日期”这个小功能时，往往先把结果算出来，却在输入控件、事件监听和日期格式化这些细节上踩坑。下面用一套更适合直接上线的小实现，把“如何算出本周周一”“如何安全生成 7 天列表”以及“为什么原写法会出错”一次说明白。
这个需求真正要解决什么
目标其实很明确：用户在日期输入框里选择任意一天，页面就自动展示该周从周一到周日的全部日期，并且每个日期单独放进一个 <p> 标签里。
这类需求看起来简单，但常见问题不少，尤其集中在这几处：
<input>类型写错，导致输入格式不可控；- 把事件绑在不合适的位置，结果选完日期页面不更新；
- 直接把
Date对象塞给innerHTML，最后渲染出[object Date]； - 在函数里直接修改原始日期对象，后续逻辑被连带污染。
要把这个功能写稳，核心只有两步：先准确定位“本周周一”，再把这段逻辑和日期输入事件正确连接起来。
先把 HTML 结构放对
这里最重要的一点，是使用浏览器原生的日期输入控件，也就是 type="date"。这样可以直接拿到标准化日期值，减少字符串解析带来的兼容性问题。
<label for="date">请选择日期：</label>
<input type="date" id="date" required />
<div id="output-container"></div>这个结构的好处有三点：
<label>和输入框正确关联，语义更清晰；type="date"能让浏览器提供原生日历选择能力；- 输出区域单独放在
div里，后面更新 DOM 时更直接。
JavaScript 的关键逻辑：先算周一，再生成整周
真正决定结果是否正确的，是日期计算函数。下面这版实现保留了逻辑的可读性，也避开了直接修改原始对象带来的副作用。
const outputContainer = document.getElementById('output-container');
function getDaysOfWeek(date) {
// 复制原始日期，避免修改原对象（重要！）
const current = new Date(date);
// 计算本周周一：getDate() - getDay() + 1（getDay() 周日=0，周一=1 → 周一偏移量为 -6）
// 更安全写法：统一转为周一（无论输入是周几）
const dayOfWeek = current.getDay();
const diffToMonday = dayOfWeek === 0 ? -6 : 1 - dayOfWeek; // 若为周日，向前推6天；否则推至本周一
current.setDate(current.getDate() + diffToMonday);
const week = [];
for (let i = 0; i < 7; i++) {
const day = new Date(current);
week.push(day);
current.setDate(current.getDate() + 1);
}
return week;
}
// 使用 input 事件实时响应（比 click 更友好），支持键盘输入和日历选择
document.getElementById('date').addEventListener('input', function (e) {
const selectedDate = e.target.value;
if (!selectedDate) {
outputContainer.innerHTML = '';
return;
}
try {
const weekDates = getDaysOfWeek(new Date(selectedDate));
const html = weekDates.map(d =>
`<p>${d.toLocaleDateString('en-GB', {
day: '2-digit',
month: 'short',
year: 'numeric'
})}</p>`
).join('');
outputContainer.innerHTML = html;
} catch (err) {
outputContainer.innerHTML = '<p style="color:red;">无效日期，请重试</p>';
}
});为什么要先把日期推到周一
getDay() 返回的是星期几，其中周日是 0，周一是 1，一直到周六是 6。如果需求规定“一周从周一开始”，那就不能直接按当前日期向后推 7 天，而是必须先找到这一周的起点。
这里的关键判断是：
- 如果当前是周日，
getDay()返回0，那就要向前退6天，回到周一； - 如果当前是周一到周六，就用
1 - dayOfWeek算出与周一的偏移量。
也正因为周日的返回值是 0，它需要单独处理。这是很多初学者最容易漏掉的边界条件之一。
为什么一定要克隆 Date 对象
这段代码里先写了 const current = new Date(date);，目的不是多此一举，而是避免修改传入参数本身。因为后面会调用 current.setDate()，如果直接对原对象操作，外部传进来的日期也会一起变化。
在小 demo 里，这类副作用可能暂时看不出来；但一旦后面还要继续用原始日期，比如做对比、高亮当前选中日或者参与其他计算，就会出现难查的问题。先克隆再处理，是这里最稳妥的写法。
结果展示为什么要配合事件和格式化一起处理
日期算出来以后，接下来要解决的是“何时更新页面”和“页面显示成什么样”。
示例里使用的是 input 事件，而不是把函数硬塞进 onclick：
input能更自然地响应用户操作；- 无论是点日历控件，还是通过键盘输入，事件都能触发；
- 逻辑写在 JavaScript 中，HTML 不必混入内联脚本，结构会更清楚。
另外，输出时不能直接把 Date 对象放进 innerHTML。如果直接拼接对象，很容易得到不符合预期的内容，甚至出现 [object Date]。正确做法是先格式化成字符串，再渲染到页面里。
这里选择了：
d.toLocaleDateString('en-GB', {
day: '2-digit',
month: 'short',
year: 'numeric'
})这样输出的日期会更接近 13 Nov 2024 这种可读形式，而且不会带上时间部分。相比之下，直接使用 toLocaleString() 往往会把时间一并带出来，不适合这个场景。
当用户清空输入框时，代码会把 outputContainer.innerHTML 置空；当输入无效时，则显示一条错误提示。这两处处理虽然简单，但能避免页面残留旧结果，也让交互更完整。
样式微调与几个别忽略的实践点
这部分 CSS 很短，但足够把结果列表整理得更易读：
#output-container p {
margin: 4px 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 1rem;
}每个日期单独占一行，本身就已经符合需求；再加上合适的行距和系统字体，浏览器默认样式带来的杂乱感会明显减少。
结合整套实现，再把几个最值得记住的点收一下：
- 必须使用
<input type="date">，让浏览器负责基础输入格式，避免手动解析YYYY-MM-DD之外的自由文本； getDaysOfWeek()里要克隆日期对象，避免setDate()影响原始数据；- 用
toLocaleDateString()精确控制输出格式，比直接拼Date对象更可靠； - 优先使用
addEventListener，把行为逻辑从 HTML 结构中拆出来； - 如果你想支持
"16 nov 2024"这类自定义输入格式，就需要额外引入日期解析库，例如date-fns或dayjs，复杂度会明显上升。
如果只是做一个现代浏览器里的基础周视图功能，这套方案已经足够轻量，而且可维护性也比“先能跑起来再说”的写法高得多。
