如何通过日期输入获取并显示对应周的全部七天（周一至周日）-js教程-PHP中文网

如何通过日期输入获取并显示对应周的全部七天（周一至周日）

本文介绍如何使用 HTML + JavaScript 实现：用户在日期输入框中选择任意一天，页面自动计算并展示该周从周一到周日的全部日期，每个日期独占一个标签。

本文介绍如何使用 html + javascript 实现：用户在日期输入框中选择任意一天，页面自动计算并展示该周从周一到周日的全部日期，每个日期独占一个 `

` 标签。

要实现“输入一天，输出整周七天（以周一为起点）”，关键在于两步：准确计算本周周一日期，以及将逻辑与 DOM 事件无缝绑定。原代码存在多个问题：<input> 类型不匹配（应为 type="date" 而非文本输入）、事件未正确监听、innerHTML 直接赋值 Date 对象导致 [object Date] 错误、且 days() 函数被错误地用作按钮点击处理器而未接收参数。

以下是推荐的完整实现方案：

✅ HTML 结构（语义清晰、无障碍友好）：

<label for="date">请选择日期：</label>
<input type="date" id="date" required><div id="output-container"></div>

✅ 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  
      `<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>';
  }
});

✅ 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），避免手动解析 '16 nov 2023' 这类字符串带来的兼容性风险；
✅ getDaysOfWeek() 内部需克隆 Date 对象，否则 current.setDate() 会污染传入的原始日期；
✅ 推荐使用 toLocaleDateString() 配置选项（如示例中的 'en-GB'）精确控制输出格式（如 13 Nov 2023），而非依赖 toLocaleString() 的全格式（含时间）；
⚠️ 不建议用 onclick 写在 HTML 中（内联 JS），应使用 addEventListener 实现关注点分离；
? 如需支持自定义输入格式（如 "16 nov 2023"），需额外引入日期解析库（如 date-fns 或 dayjs）或手写容错解析函数，但会显著增加复杂度，不推荐作为基础方案。

该方案轻量、标准、可扩展，适用于任何现代浏览器，是构建日期周视图功能的专业级入门实现。