React中Moment格式化日期在火狐出现双横杠问题求助

一、Firefox下日期格式化出现双横杠的原因及修复 #

出现12-Nov--2022的核心问题是Firefox对非ISO标准的日期字符串解析规则更严格，导致moment无法正确识别有效日期，而Chrome对这类非标准格式兼容性更强。比如后端返回2022-11-12 10:30（用空格分隔日期和时间，而非ISO要求的T）时，Firefox原生Date构造函数会解析失败，moment拿到无效日期后格式化就会出现年份缺失，表现为双横杠。

修复方法：给moment明确指定解析格式，不要依赖自动推断。修改你的格式化代码：

if (vStatus === 1) {
  let result = vResponse.data.Output.Result.map((item) => {
    return {
      ...item,
      // 替换为后端实际返回的日期格式，比如YYYY-MM-DD HH:mm
      Datetime: moment(item.Datetime, "YYYY-MM-DD HH:mm").format("DD-MMM-YYYY HH:mm"),
      Tee: moment(item.Tee, "YYYY-MM-DD HH:mm").format("DD-MMM-YYYY HH:mm"),
    };
  });
  SetResult(result);
  SetTotalPageValue(vResponse.data.Output.TotalPage);
  SetStartDateValue(vResponse.data.Input.StartDate.Value);
  SetEndDateValue(vResponse.data.Input.EndDate.Value);
  SetStatusIdValue(vResponse.data.Input.StatusId.Value);
  SetStatusId(vResponse.data.Input.StatusId);
}
})

二、react-csv导出Excel的格式统一问题 #

Chrome导出后显示为11/12/2022是因为Excel自动把格式化后的字符串识别为日期并转换了显示格式，而Firefox的异常字符串不会触发该转换。要让导出日期统一保持DD-MMM-YYYY HH:mm格式，需强制Excel将字段识别为纯文本：

方法1：给日期字段添加不可见的制表符前缀，避免Excel自动转换：

// 修改格式化后的字段值
Datetime: `\t${moment(item.Datetime, "YYYY-MM-DD HH:mm").format("DD-MMM-YYYY HH:mm")}`,
Tee: `\t${moment(item.Tee, "YYYY-MM-DD HH:mm").format("DD-MMM-YYYY HH:mm")}`,

方法2：在react-csv的headers配置中指定字段类型为字符串（部分版本支持）：

const headers = [
  { label: 'Datetime', key: 'Datetime', type: 'string' },
  { label: 'Tee', key: 'Tee', type: 'string' },
  // 其他字段配置...
];

额外验证建议 #

1. 打印item.Datetime和item.Tee的原始值，确认后端返回格式是否统一，排查是否有空值或异常格式的情况。
2. 用moment(item.Datetime).isValid()检查解析结果是否为有效日期，验证解析逻辑是否生效。

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