如何在React中格式化日期？含XML日期处理实例

嘿，既然你已经成功安装并引入了Moment.js，那搞定这个日期格式化简直手到擒来！咱们直接看怎么改你的代码：

首先，确保你已经在组件顶部正确导入Moment：

import moment from 'moment';

接下来，修改你渲染日期的部分——只需要把item.pubDate用Moment的format方法处理一下就行。你的目标格式是22 Mar 2018，对应Moment的格式字符串是DD MMM YYYY。

修改后的完整render代码如下：

render() {
  return (
    <div>
      {this.state.posts.map(function(item, i) {
        return (
          <li key={item.guid}>
            <time className="MediumPost-time">
              {moment(item.pubDate).format('DD MMM YYYY')}
            </time>
          </li>
        )
      })}
    </div>
  )
}

简单解释下：

• moment(item.pubDate)会把你的GMT格式日期字符串解析成Moment对象
• .format('DD MMM YYYY')则把这个对象转换成你想要的“日 月缩写 年”的格式

如果你不想依赖Moment.js，也可以用原生JS的Intl.DateTimeFormat试试，代码大概是这样：

new Intl.DateTimeFormat('en-GB', {
  day: '2-digit',
  month: 'short',
  year: 'numeric'
}).format(new Date(item.pubDate))

不过既然你已经装了Moment，用它会更省心，尤其是处理不同时区或复杂格式的时候。

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