HTML/CSS/JS周历开发上一周切换按钮逻辑实现问题咨询

问题分析 #

• 原有代码逻辑依赖当月日期边界计算周范围，每次渲染强制将基准日期置为当月1号，且未存储当前周的偏移状态，导致上一周跳转无计算依据
• 全局变量lastDayOfWeek仅在下周跳转时更新，上周跳转逻辑完全为空，仅执行了无意义的setMonth操作
• 跨月判断逻辑冗余，容易出现边界错误

优化实现方案 #

建议放弃基于当月日期计算周范围的思路，改为直接记录当前周的起始日期，每次切换周直接对基准日期做±7天的偏移，Date对象会自动处理跨月、跨年的场景，逻辑会简洁很多，修改后的完整JS代码如下：

// 记录当前周的第一天（周日）
let currentWeekStart = new Date();
// 对齐到本周日
currentWeekStart.setDate(currentWeekStart.getDate() - currentWeekStart.getDay());
const months = [
  'January', 'February', 'March', 'April', 'May', 'June',
  'July', 'August', 'September', 'October', 'November', 'December'
];

function renderCalendar() {
  const monthDays = document.querySelector(".days");
  const today = new Date();
  let days = '';
  // 循环7天生成当前周的日期
  for (let i = 0; i < 7; i++) {
    const currentDate = new Date(currentWeekStart);
    currentDate.setDate(currentWeekStart.getDate() + i);
    // 判断是否为当天
    const isToday = currentDate.getDate() === today.getDate() 
      && currentDate.getMonth() === today.getMonth() 
      && currentDate.getFullYear() === today.getFullYear();
    // 判断是否为非当前月日期
    const isOtherMonth = currentDate.getMonth() !== currentWeekStart.getMonth();
    const className = isToday ? 'today' : isOtherMonth ? 'prev-date' : '';
    days += `<div class="${className}">${currentDate.getDate()}</div>`;
  }
  monthDays.innerHTML = days;
  // 更新顶部月份显示
  document.querySelector(".date h1").innerHTML = months[currentWeekStart.getMonth()];
  document.querySelector(".date p").innerHTML  = new Date().toDateString();
}

// 上一周逻辑
document.querySelector(".prev").addEventListener("click", () => {
  // 日期减7天，自动处理跨月跨年
  currentWeekStart.setDate(currentWeekStart.getDate() - 7);
  renderCalendar();
});

// 下一周逻辑
document.querySelector(".next").addEventListener("click", () => {
  // 日期加7天，自动处理跨月跨年
  currentWeekStart.setDate(currentWeekStart.getDate() + 7);
  renderCalendar();
});

// 初始化渲染
renderCalendar();

改动说明 #

• 新增currentWeekStart变量存储当前周的起始日期，状态统一管理，避免零散变量导致的逻辑混乱
• 渲染逻辑直接循环7天生成日期，由Date对象自动处理日期边界问题，无需手动判断跨月
• 上下周切换仅需要对基准日期做±7天的操作，逻辑极简，无边界错误
• 保留了原有today、prev-date的样式类判断，原有CSS无需修改即可直接适配

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