如何用JS优雅生成含年月链接的未来12个月日历列表？

我需要构建一个链接列表，展示从当月开始的未来12个月的内容，输出格式如下：

February 2024

March 2024

....以此类推

链接文本要显示「月份 年份」，href参数对应该月份的第一天。我之前的代码是手动维护年月数组，不仅不够优雅，还得定期更新，想找更优的实现方式。

之前的旧代码：

var theMonths = new Array("January 2024", "February 2024", "March 2024", "April 2024", "May 2024", "June 2024", "July 2024", "August 2024",
  "September 2024", "October 2024", "November 2024", "December 2024", "January 2025", "February 2025", "March 2025", "April 2025", "May 2025", "June 2025", "July 2025", "August 2025", "September 2025", "October 2025", "November 2025", "December 2025");

var theDates = new Array("1/1/2024", "2/1/2024", "3/1/2024", "4/1/2024", "5/1/2024", "June 2024", "July 2024", "August 2024",
  "September 2024", "October 2024", "November 2024", "December 2024", "January 2025", "February 2025", "March 2025", "April 2025", "May 2025", "June 2025", "July 2025", "August 2025", "September 2025", "October 2025", "November 2025", "December 2025");

var today = new Date();
var aMonth = today.getMonth();
var i;
for (i = 0; i < 12; i++) {
  document.write1('<div class="dateLinks"><a href="example.com/ShowCalendar.asp' + '?chdate=' + [aDate] + '">');
  document.writeln(theMonths[aMonth] + '</a></div>'); //here you can do whatever you want...
  aMonth++;
  if (aMonth > 11) {
    aMonth = 0;
  }
}

优化方案 #

不需要手动维护数组，直接通过Date对象动态计算每个月份的日期和格式，代码如下：

// 获取当前日期
const currentDate = new Date();
// 要生成的月份数量（从当月开始的12个月）
const monthsToGenerate = 12;
// 月份名称数组
const monthNames = ["January", "February", "March", "April", "May", "June",
                    "July", "August", "September", "October", "November", "December"];

// 循环生成每个月份的链接
for (let i = 0; i < monthsToGenerate; i++) {
  // 创建当前要处理的月份日期
  const targetDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + i, 1);
  
  // 格式化月份（补零成两位）
  const formattedMonth = String(targetDate.getMonth() + 1).padStart(2, '0');
  // 格式化年份
  const formattedYear = targetDate.getFullYear();
  // 生成href需要的日期字符串：MM/DD/YYYY
  const dateParam = `${formattedMonth}/01/${formattedYear}`;
  // 生成链接文本：Month Year
  const linkText = `${monthNames[targetDate.getMonth()]} ${formattedYear}`;
  
  // 构建HTML并插入到页面中（推荐用appendChild替代document.write，更灵活）
  const div = document.createElement('div');
  div.className = 'dateLinks';
  const a = document.createElement('a');
  a.href = `example.com/ShowCalendar.asp?chdate=${dateParam}`;
  a.textContent = linkText;
  div.appendChild(a);
  document.body.appendChild(div);
}

代码说明： #

• 动态计算日期：通过new Date(year, month, day)的方式，直接在当前月份基础上累加i来获取未来每个月份的第一天，自动处理跨年的情况（比如12月之后自动跳到下一年1月）。
• 格式化处理：用padStart(2, '0')确保月份是两位数字（比如1月变成01），符合需求中的chdate参数格式。
• 更优的DOM操作：用createElement和appendChild替代document.write，避免阻塞页面渲染，也更适合现代前端开发的场景。
• 无需手动维护：代码会自动根据当前日期生成对应的12个月数据，完全不需要定期更新数组。

如果一定要兼容旧场景使用document.write，可以把构建HTML的部分改成：

document.write(`<div class="dateLinks"><a href="example.com/ShowCalendar.asp?chdate=${dateParam}">${linkText}</a></div>`);

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