如何实现输入日期后展示该周（周一为始）所有日期的页面绑定

需求说明 #

输入日期（例如 16 nov 2023），获取该周以周一为起始的所有日期，示例输出：

13 nov 2023
14 nov 2023
15 nov 2023
16 nov 2023
17 nov 2023
18 nov 2023
19 nov 2023

当前问题：无法将现有JavaScript代码与HTML页面绑定，实现输入框输入日期、点击提交按钮后在页面以单独<p>标签展示所有日期的功能。

原代码问题分析 #

1. 按钮点击事件未传递输入的日期参数，onclick="days()"调用时无参数，导致days函数无法获取目标日期
2. 获取输入框值的方式错误，输入框的值应通过value属性获取，而非innerHTML
3. 未处理用户输入的日期字符串到Date对象的解析逻辑
4. 返回的Date对象未格式化为需求的dd mmm yyyy格式
5. 未实现用单独<p>标签渲染结果的逻辑

修正后的完整代码 #

HTML部分 #

<input id="dateInput" placeholder="输入日期（如 16 nov 2023）">
<button type="button" onclick="getWeekDays()">获取当周日期</button>
<div id="resultContainer"></div>

JavaScript部分 #

// 格式化日期为 dd mmm yyyy 格式
function formatDate(date) {
  const months = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];
  const day = String(date.getDate()).padStart(2, '0');
  const month = months[date.getMonth()];
  const year = date.getFullYear();
  return `${day} ${month} ${year}`;
}

// 获取以周一为起始的当周所有日期
function getWeekDays() {
  // 获取输入框的日期字符串
  const inputStr = document.getElementById('dateInput').value.trim();
  if (!inputStr) {
    alert('请输入日期');
    return;
  }

  // 解析输入的日期为Date对象
  const currentDate = new Date(inputStr);
  if (isNaN(currentDate.getTime())) {
    alert('日期格式不正确，请输入类似 16 nov 2023 的格式');
    return;
  }

  const week = [];
  // 计算当周周一的日期：处理周日的特殊情况（周日应归属上一周的周一）
  const mondayOffset = currentDate.getDay() === 0 ? -6 : 1 - currentDate.getDay();
  const monday = new Date(currentDate);
  monday.setDate(currentDate.getDate() + mondayOffset);

  // 生成一周7天的日期
  for (let i = 0; i < 7; i++) {
    const day = new Date(monday);
    day.setDate(monday.getDate() + i);
    week.push(day);
  }

  // 渲染结果到页面，每个日期用单独的<p>标签
  const resultContainer = document.getElementById('resultContainer');
  resultContainer.innerHTML = ''; // 清空之前的结果
  week.forEach(date => {
    const p = document.createElement('p');
    p.textContent = formatDate(date);
    resultContainer.appendChild(p);
  });
}

代码说明 #

1. 日期格式化函数：formatDate将Date对象转换为需求的dd mmm yyyy格式，确保月份是三位小写缩写
2. 日期解析验证：获取输入框值后，先验证是否为空，再解析为Date对象并检查是否有效
3. 周一计算逻辑：修正了原代码中周日的处理问题（原代码中周日会错误计算到下周一，现在调整为周日归属上一周的周一）
4. 结果渲染：清空结果容器后，为每个日期创建<p>标签并添加到页面中

内容的提问来源于stack exchange，提问作者user3697060