如何使用Moment.js优化日历前后按钮切换月份的代码？

直接利用Moment.js的内置方法就能彻底省去手动转数值、补零的冗余操作，核心逻辑如下：

初始化当前月份 #

// 初始化为当前系统月份，直接输出YYYY-MM格式
let currentMonth = moment().format('YYYY-MM');

// 如果是从已有日期字符串初始化（比如后端返回的2024-05）
// let currentMonth = moment('2024-05', 'YYYY-MM').format('YYYY-MM');

前一个月切换逻辑 #

document.querySelector('.prev-btn').addEventListener('click', () => {
  // 解析当前月份字符串 → 减1个月 → 重新格式化输出
  currentMonth = moment(currentMonth, 'YYYY-MM').subtract(1, 'month').format('YYYY-MM');
  updateCalendar(currentMonth); // 替换成你更新日历内容的函数
});

后一个月切换逻辑 #

document.querySelector('.next-btn').addEventListener('click', () => {
  // 解析当前月份字符串 → 加1个月 → 重新格式化输出
  currentMonth = moment(currentMonth, 'YYYY-MM').add(1, 'month').format('YYYY-MM');
  updateCalendar(currentMonth); // 替换成你更新日历内容的函数
});

关键优势 #

• 自动处理跨年份边界：比如1月减1个月会自动转为去年12月，无需手动判断年份增减
• 自动补零：月份为个位数时（如5月），format('YYYY-MM')会直接输出YYYY-05，省去手动补零代码
• 代码极简：把原来拆分年、月、判断边界、拼接字符串的冗余逻辑全部压缩成一行核心调用

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