Angular12中基于双日期计算天数的跨浏览器兼容问题

问题现象 #

基于两个日期计算天数的功能在Chrome中正常运行，但在Firefox中失效：

• 使用Moment.js时，Firefox抛出无效日期错误
• 使用原生JS计算时，Firefox返回NaN，Chrome返回正确结果

代码示例与修复方案 #

1. Moment.js 方案问题修复 #

原代码：

getDaysCount(firstDate: any, secondDate: any) {
    let first = moment(firstDate, 'MM-DD-YYYY');
    let second = moment(secondDate, 'MM-DD-YYYY');
    return second.diff(first, 'days');
}

调用代码：

console.log(this.getDaysCount('11-12-2022', '11-14-2022'));

问题原因：Moment.js默认采用宽松解析模式，不同浏览器对非ISO格式日期的解析逻辑存在差异，导致Firefox无法正确识别目标格式的日期字符串。

修复方法：开启严格解析模式，在moment()函数中添加第三个参数true，强制按指定格式解析，同时可添加日期有效性校验：

getDaysCount(firstDate: any, secondDate: any) {
    // 开启严格解析，保证跨浏览器解析逻辑一致
    let first = moment(firstDate, 'MM-DD-YYYY', true);
    let second = moment(secondDate, 'MM-DD-YYYY', true);
    
    // 校验日期有效性，避免无效值传入导致计算错误
    if (!first.isValid() || !second.isValid()) {
        throw new Error('传入日期格式错误，需为MM-DD-YYYY格式');
    }
    
    return second.diff(first, 'days');
}

2. 原生JS方案问题修复 #

原代码：

var Difference_In_Days = Math.ceil(Math.abs(secondDate - firstDate) / (1000 * 60 * 60 * 24));

问题原因：Firefox的Date构造函数无法正确解析MM-DD-YYYY格式的横杠分隔字符串（Chrome对此做了兼容处理），导致secondDate或firstDate为无效日期，计算时返回NaN。

修复方法：手动解析日期字符串，拆分月、日、年并传入Date构造函数（注意月份参数为0-11，需减1）：

getDaysCount(firstDateStr: string, secondDateStr: string) {
    // 自定义解析MM-DD-YYYY格式的函数
    const parseDate = (dateStr: string) => {
        const [month, day, year] = dateStr.split('-').map(Number);
        return new Date(year, month - 1, day);
    };
    
    const firstDate = parseDate(firstDateStr);
    const secondDate = parseDate(secondDateStr);
    
    // 校验日期有效性
    if (isNaN(firstDate.getTime()) || isNaN(secondDate.getTime())) {
        throw new Error('传入日期格式错误，需为MM-DD-YYYY格式');
    }
    
    const Difference_In_Days = Math.ceil(Math.abs(secondDate.getTime() - firstDate.getTime()) / (1000 * 60 * 60 * 24));
    return Difference_In_Days;
}

补充建议：如果业务允许，建议统一使用ISO 8601格式（YYYY-MM-DD）的日期字符串，该格式被所有现代浏览器原生支持，可彻底避免跨浏览器解析差异问题。

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