前端js日期计算跨月导致的错误

一、页面显示异常

该bug源于一个简单的报表展示需求,在日期选择框中默认显示两天前的日期。我看了看同事留下的代码,觉得挺简单,直接进行复用:

java 复制代码
function curDt() : void {
    var date : Date = new Date();
    var y : number = date.getFullYear();
    var m : number = date.getMonth()+1;
    var d : number = date.getDate() - 2;  // 就是这里!
    var startT : string = y+"-"+(m<10?('0'+m):m)+"-"+(d<10?('0'+d):d);
}

需求上线半个月都没有出现什么问题,直到12月1号,业务反馈前端日期展示变成了:

2025-12-0-1

一看才发现,不止我这一个地方出错了,其余采用这种计算逻辑的页面日期也全乱了。

二、错误分析

假设今天是 2025年12月1日,那么date.getDate() = 1,date.getDate() - 2 = -1,而三元运算符处理负数 (d < 10 ? ('0' + d) : d)-1 < 10 成立,所以结果是 '0' + (-1) = '0-1',最后再拼接年月就变成了2025-12-0-1

三、修复方案

使用js内置函数,setDate() 方法,Date对象会自动处理跨月、跨年的边界情况,先date - 2, 再计算年、月、日。

java 复制代码
// 获取两天前的正确日期
    const date = new Date();
    date.setDate(date.getDate() - 2); // 自动处理跨月跨年
    
    const y = date.getFullYear();
    const m = date.getMonth() + 1;
    const d = date.getDate();
    
    // 格式化日期
    const format = (num: number) => num < 10 ? '0' + num : num;
    const startT = `${y}-${format(m)}-${format(d)}`;

其实这也是一种值得注意的编码规范,就是涉及时间计算的时候,能尽量使用内置函数就使用内置函数,自定义时间计算函数容易带来跨年和跨月问题。

相关推荐
零一科技3 小时前
瑞吉外卖项目,前端源码(用户端)解析
前端
用户93051065822243 小时前
module federation,monorepo分不清楚?
前端·架构
柳安3 小时前
手写new操作符执行过程
前端·javascript
狗哥哥3 小时前
Vue 3 统一面包屑导航系统:从配置地狱到单一数据源
前端·vue.js·架构
可乐红烧西红柿3 小时前
tauri2+vue+vite实现基于webview视图渲染的桌面端开发
前端·前端框架
鱼鱼块3 小时前
从后端拼模板到 Vue 响应式:前端界面的三次进化
前端·vue.js·面试
UIUV3 小时前
JavaScript内存管理与闭包原理:从底层到实践的全面解析
前端·javascript·代码规范
liu****3 小时前
9.二叉树(一)
c语言·开发语言·数据结构·算法·链表
她说..3 小时前
Spring AOP场景2——数据脱敏(附带源码)
java·开发语言·java-ee·springboot·spring aop