本文介绍如何在网页中实现：用户输入任意日期，点击提交后自动计算该日期所在周（以周一为起点）的7天，并将每天日期分别显示在独立的 标签中。
本文介绍如何在网页中实现：用户输入任意日期，点击提交后自动计算该日期所在周（以周一为起点）的7天，并将每天日期分别显示在独立的 `
` 标签中。
要实现“输入一个日期，输出其所在完整周（周一至周日）的全部日期”，关键在于两步：准确解析用户输入的日期，以及可靠地归算到当周周一并生成连续7天。以下是一个完整、健壮且可直接集成的解决方案。
✅ 推荐实现方式（现代、语义化、无依赖）
使用原生 HTML <input type="date"> 配合 input 事件监听，避免手动解析字符串日期带来的格式兼容性问题（如 "16 nov 2023" 在不同浏览器中可能解析失败）。type="date" 保证输入值始终为标准 YYYY-MM-DD 格式（如 "2023-11-16"），极大提升可靠性。
<input type="date" id="date" placeholder="请选择日期"><div id="output-container"></div>
const outputContainer = document.querySelector('#output-container');
function getDaysOfWeek(current) {
// 复制原始日期对象，避免修改原日期（重要！）
const date = new Date(current);
// 计算本周周一：getDay() 返回 0(Sun)~6(Sat)，故 Monday = day - (day + 6) % 7
const day = date.getDay();
const diffToMonday = day === 0 ? -6 : 1 - day; // 若为周日，向前推6天；否则推至周一
date.setDate(date.getDate() + diffToMonday);
// 生成周一至周日共7天
const week = [];
for (let i = 0; i {
const inputDate = e.target.value;
if (!inputDate) return; // 忽略空值
try {
const weekDates = getDaysOfWeek(new Date(inputDate));
// 使用 toLocaleDateString 实现灵活本地化格式（如 '13 Nov 2023'）
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>';
}
});
? 格式说明：
toLocaleDateString('en-GB', {...})输出类似13 Nov 2023的格式；如需中文格式（如11月13日），可改为'zh-CN'并调整选项。
⚠️ 注意事项与优化点
-
不要直接修改传入的
Date对象：原问题代码中current.setDate(...)会污染原始日期，导致后续调用异常。本方案使用副本操作，确保函数纯度。 -
避免
onclick写在 HTML 中：内联事件处理（如onclick="days()"）不利于维护和调试，推荐统一用addEventListener。 -
错误防御：添加
try...catch捕获非法日期（如用户手动编辑type="date"输入框内容），提升用户体验。 -
样式建议：为
<p></p>添加margin: 0可消除默认间距，使日期列表更紧凑：#output-container p { margin: 0; line-height: 1.5; }
✅ 效果验证示例
当用户选择 2023-11-16（周四）时，输出为：
<p>13 Nov 2023</p> <p>14 Nov 2023</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/ai/874" title="包阅AI"><img src="https://img.php.cn/upload/ai_manual/001/503/042/68b6d56e974bf270.png" alt="包阅AI" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/ai/874" title="包阅AI" class="overflowclass">包阅AI</a> <p class="overflowclass">包阅AI是一款面向文档、网页和论文阅读的 AI 阅读助手。</p> </div> <a rel="nofollow" href="/ai/874" title="包阅AI" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p>15 Nov 2023</p> <p>16 Nov 2023</p> <p>17 Nov 2023</p> <p>18 Nov 2023</p> <p>19 Nov 2023</p>
此方案简洁、健壮、符合 Web 标准，适用于所有现代浏览器，无需第三方库即可开箱即用。
