2016年2月日历图解原理：3个代码坑让你加班到凌晨

别再翻那几百页的官方文档了，抓不住重点就干瞪眼。今天用图解原理把2016年2月日历里的代码坑给你扒干净。

很多工程师以为日历就是个显示日期的组件，直到2016年2月29日这个闰年bug找上门，项目延期、客户投诉、线上事故接踵而至。你以为只是显示错了一天？错，是整月逻辑崩盘，后端接口返回错误数据，前端渲染出14天的二月，数据库里还插了不存在的2月30日记录。

我见过太多团队在2016年2月前后踩坑，有人用Excel手算天数，有人硬编码判断闰年，结果全部翻车。今天不讲虚的，直接上代码对比，让你看清哪里错了、为什么错、怎么改。

坑的现象：二月天数少了一天或多了一天

先看典型错误场景。2016年是闰年，二月应该有29天。但很多代码里，二月只渲染了28天，或者在平年时错误地显示了29天。更隐蔽的是，某些系统在处理跨月查询时，2月29日直接变成3月1日，或者在2月28日之后直接跳到3月，导致订单、考勤、排班全部错位。

错误现象清单：

2016年2月只显示28天，29日消失
2017年2月错误显示29天，点击后页面报错
跨月统计时，2月29日的数据被归入3月
数据库插入失败，提示"2月29日不存在"

这些现象看似独立，实则根源相同：对闰年规则的判断逻辑有误，或者干脆没判断。

根本原因：闰年判断的三重陷阱

闰年规则不是简单的"能被4整除就是闰年"，这里有三个层层递进的陷阱：

陷阱一：忽略百年规则 能被4整除但不能被100整除的是闰年，能被400整除的也是闰年。1900年能被4和100整除，但不能被400整除，所以不是闰年。2000年能被400整除，是闰年。很多代码只写了year % 4 === 0，漏掉了后两条。

陷阱二：时区导致日期漂移 JavaScript的Date对象默认使用本地时区。如果服务器在东八区，客户端在西五区，2月29日00:00在两边可能是不同的日期。new Date(2016, 1, 29)在某些时区下会被解析为2月28日或3月1日。

陷阱三：月份索引从0开始 JavaScript中月份是0-11，2月是索引1，不是2。new Date(2016, 2, 29)创建的是3月29日，不是2月29日。这个坑连资深开发都栽过，我在GitHub 开源仓库里看到过一个星10k+的日期库，早期版本就因为这个bug被大量提issue。

核心问题： 大多数开发者把"判断闰年"和"生成日历"当成两个独立功能，没有形成闭环验证。

正确写法对比：从错误到正确的代码演进

错误写法（常见于早期项目）：

// ❌ 错误：只判断能被4整除
function isLeapYear(year) {return year % 4 === 0;
}function getDaysInMonth(year, month) {if (month === 2) {return isLeapYear(year) ? 29 : 28;}return 31; // 错误：4、6、9、11月也是30天
}// 使用：2016年2月返回29天，正确
// 但1900年2月也返回29天，错误
// 且4月返回31天，错误

这段代码的问题一目了然：闰年判断不完整，其他月份天数硬编码为31天。1900年会被误判为闰年，4月会被错误地赋予31天。

正确写法（生产环境推荐）：

// ✅ 正确：完整的闰年判断 + 动态获取天数
function isLeapYear(year) {return (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
}function getDaysInMonth(year, month) {// 利用Date特性：下个月1号的前一天就是本月最后一天return new Date(year, month, 0).getDate();
}// 生成2016年2月日历
function generateCalendar(year, month) {const daysInMonth = getDaysInMonth(year, month);const firstDay = new Date(year, month - 1, 1).getDay(); // 注意月份减1const calendar = [];let day = 1;for (let week = 0; week < Math.ceil((firstDay + daysInMonth) / 7); week++) {const row = [];for (let i = 0; i < 7; i++) {if (week === 0 && i < firstDay) {row.push(null); // 空白占位} else if (day > daysInMonth) {row.push(null);} else {row.push(day++);}}calendar.push(row);}return calendar;
}// 测试
console.log(generateCalendar(2016, 2)); // 2月，正确显示29天
console.log(generateCalendar(1900, 2)); // 2月，正确显示28天
console.log(generateCalendar(2000, 2)); // 2月，正确显示29天

关键改进点：

闰年判断完整：覆盖4、100、400三条规则
天数动态获取：new Date(year, month, 0).getDate()利用JavaScript日期机制，自动处理大小月，无需硬编码
月份索引正确处理：new Date(year, month - 1, 1)将1-12月转换为0-11索引
边界安全：Math.ceil确保周数计算正确，null占位避免数组越界

对比效果： | 场景 | 错误写法 | 正确写法 | |------|----------|----------| | 2016年2月 | 29天 ✓ | 29天 ✓ | | 1900年2月 | 29天 ✗ | 28天 ✓ | | 2000年2月 | 29天 ✓ | 29天 ✓ | | 2016年4月 | 31天 ✗ | 30天 ✓ | | 跨月查询 | 数据错位 ✗ | 数据准确 ✓ |

复现与修复代码：从bug到解决方案的完整链路

复现步骤：

使用错误写法生成1900年2月日历
观察结果：显示29天
验证：1900年不是闰年，应为28天
定位：isLeapYear(1900)返回true，因为1900 % 4 === 0

修复验证代码：

// 单元测试：覆盖所有边界情况
function testLeapYear() {const testCases = [{ year: 2016, expected: true, reason: "能被4整除，不能被100整除" },{ year: 1900, expected: false, reason: "能被100整除，不能被400整除" },{ year: 2000, expected: true, reason: "能被400整除" },{ year: 2024, expected: true, reason: "能被4整除，不能被100整除" },{ year: 2100, expected: false, reason: "能被100整除，不能被400整除" },];testCases.forEach(({ year, expected, reason }) => {const result = isLeapYear(year);console.log(`${year}: ${result === expected ? "✓" : "✗"} (${reason})`);if (result !== expected) {throw new Error(`闰年判断错误: ${year}`);}});
}function testDaysInMonth() {const testCases = [{ year: 2016, month: 2, expected: 29 },{ year: 1900, month: 2, expected: 28 },{ year: 2000, month: 2, expected: 29 },{ year: 2023, month: 4, expected: 30 },{ year: 2023, month: 7, expected: 31 },];testCases.forEach(({ year, month, expected }) => {const result = getDaysInMonth(year, month);console.log(`${year}年${month}月: ${result === expected ? "✓" : "✗"} (期望${expected}天)`);if (result !== expected) {throw new Error(`天数计算错误: ${year}年${month}月`);}});
}// 运行测试
testLeapYear();
testDaysInMonth();

输出结果：

2016: ✓ (能被4整除，不能被100整除)
1900: ✓ (能被100整除，不能被400整除)
2000: ✓ (能被400整除)
2024: ✓ (能被4整除，不能被100整除)
2100: ✓ (能被100整除，不能被400整除)
2016年2月: ✓ (期望29天)
1900年2月: ✓ (期望28天)
2000年2月: ✓ (期望29天)
2023年4月: ✓ (期望30天)
2023年7月: ✓ (期望31天)

时区陷阱修复：

如果涉及跨时区场景，必须显式指定时区或使用UTC：

// 使用UTC避免时区漂移
function getDaysInMonthUTC(year, month) {return new Date(Date.UTC(year, month, 0)).getUTCDate();
}// 生成UTC日历
function generateCalendarUTC(year, month) {const daysInMonth = getDaysInMonthUTC(year, month);const firstDay = new Date(Date.UTC(year, month - 1, 1)).getUTCDay();// 后续逻辑同前，使用UTC方法// ...
}