React Native中Moment.js处理JSON日期返回无效日期问题

嘿，这个问题我之前在React Native项目里也碰到过！核心原因是JavaScript的Date构造函数对非标准日期格式的解析存在兼容性问题，具体来说：

你的日期字符串是"15.10.2019 10:39:27"，属于DD.MM.YYYY HH:mm:ss格式——这并不是ISO标准的日期格式（ISO标准是YYYY-MM-DDTHH:mm:ss）。不同JavaScript环境（包括React Native的JS引擎）对这种非标准格式的解析逻辑不一致，很多时候new Date(ed)会直接返回一个无效的Date对象，自然Moment.js处理后就会显示“Invalid date”。

而你直接展示orders.dateTime时没问题，是因为那只是把字符串原样输出，根本没有做日期解析操作。

解决方法 #

这里有两种简单有效的方案：

方案1：让Moment.js直接按指定格式解析字符串

Moment.js本身支持传入日期字符串和对应的格式来精准解析，完全不需要借助new Date()，这也是最推荐的方式：

render(){
  const ed = order.dateTime;
  // 注意格式字符串的大小写：MM是月份，mm是分钟，ss是秒
  const check = moment(ed, "DD.MM.YYYY HH:mm:ss").format("DD.MM.YYYY, HH:mm");
  return (
    <View>
      <Text>{check}</Text>
    </View>
  )
}

这里要注意格式字符串的大小写规范：

• DD：两位数的日期
• MM：两位数的月份
• YYYY：四位数的年份
• HH：24小时制的小时
• mm：两位数的分钟
• ss：两位数的秒

你之前的代码里用了HH:MM来格式化分钟，这里要改成HH:mm哦，不然分钟部分会显示错误的月份值。

方案2：手动拆分字符串构造合法的Date对象

如果不想依赖Moment的解析能力，也可以手动拆分日期字符串，用标准参数构造Date对象（注意月份是从0开始的，所以要减1）：

render(){
  const ed = order.dateTime;
  const [dateStr, timeStr] = ed.split(' ');
  const [day, month, year] = dateStr.split('.').map(Number);
  const [hour, minute] = timeStr.split(':').map(Number);
  
  const validDate = new Date(year, month - 1, day, hour, minute);
  const check = moment(validDate).format("DD.MM.YYYY, HH:mm");
  
  return (
    <View>
      <Text>{check}</Text>
    </View>
  )
}

额外提醒 #

Moment.js目前已经进入维护模式，不再新增功能，如果你是新项目，推荐考虑更轻量的日期库比如dayjs或者date-fns，它们的API和Moment类似，但体积更小，性能更好。

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