如何在 React 中格式化日期

Question

How do I format a date in React?

The date comes in the form <pubDate>Thu, 22 Mar 2018 14:11:40 GMT</pubDate> .

I would like to display only 22 Mar 2018 .

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

Edited After installing Moment.js with npm install moment --save , I used it successfully this way:

import React, { Component } from 'react';
import moment from 'moment'

class PrettyDate extends Component {

  render() {
    return (
      <time className="MediumPost-time">{moment(item.pubDate).format('ll')}</time>
    )
  }
}

export default PrettyDate;

Answer 1

不依赖lib的JavaScript解决方案是item.pubDate.split(" ").slice(1, 4).join(" ")但是如果您已经安装了它，则可以考虑使用moment 。

Answer 2

you can format the date like that.

function myDate() {
  const date = new Date(2018,3,22);
  const year = date.getFullYear();
  const month = date.toLocaleString("en-US", { month: "long" });
  const day = date.toLocaleString("en-US", { day: "2-digit" });
  

  return (
    <div>
      <span>{day}</span>
      <span>{month}</span>
      <span>{year}</span>
    </div>
  );
}

export default myDate;