Question

我有这样的组件

var Post = React.createClass({


render: function () {
    return (
      <li key={ this.props.message.uid }>
        <div className="avatar">
          <img src={ this.props.message.user.avatar } className="img-circle"/>
        </div>
        <div className="messages">
          <p>{ this.props.message.content }</p>
          <span className="date">{ "@"+this.props.message.user.login + " • " }</span>
          <span className="date timeago" title={ this.props.message.createdAt }>
            { this.props.message.createdAt }
          </span>
        </div>
      </li>
      )
  }
});

证明createdAt是一个类似1451589259845的字符串，我想格式化日期。我怎么能在ReactJS上做到这一点？我尝试将new Date()放在括号内但出错了。

Answer 1

在开始返回之前，只需按常规方式在JS中执行此操作，并将模板放在：

中

render: function() {
  var cts = this.props.message.createdAt,
      cdate = (new Date(cts)).toString();
  return (
    ...
    <span ...>{ cdate }</span>
    ...
  );
}

有很多方法可以进行字符串格式化，Date有很多内置格式（如toLocaleString或toUTCString），或者您可以使用像{{{}这样的专用格式化程序3}}

Answer 2

您可以运行常规JavaScript新日期（）。但是，我强烈建议使用momentjs，因为它似乎更符合你要做的事情。

在命令行上执行：

npm install moment --save

然后在您的代码中var moment = require("moment");或 import moment from "moment";取决于您是否使用ES6。

之后，我会像这样运行代码。

var timeAgo = moment(this.props.message.createdAt).fromNow()

<span className="date timeago" title={ timeAgo }> { timeAgo }</span>

另外，安装一个软件包可能看起来很痛苦，但是时刻非常好，我强烈推荐它。我推荐它的原因是人性化次。例如，fromNow（）格式化使其在30秒前，4天前或3个月前说出来。这听起来像是一个人写的，除非另有说明，否则它不会显示大量不必要的信息。我的意思是，大多数人都不想知道几小时前它是多少分钟前。所以，出于这些原因，我推荐了这个库。如果您愿意，可以随意使用香草JS，我只是觉得那个时刻非常适合表达目的，让我避免写大量数学函数来显示月份等。

Answer 3

想要这种格式吗？

2018年5月30日星期三。

只需声明

const DATE_OPTIONS = { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' };

然后在你的React JS代码中

{(new Date()).toLocaleDateString('en-US', DATE_OPTIONS)}

toLocaleDateString（）方法返回一个字符串，其中包含该日期日期部分的语言敏感表示

Source and more options

Answer 4

在React中而无需moment.js

    const dateFromData= "06/15/1990" //string type
    const formatDate = (dateString: string) => {
    const options: Intl.DateTimeFormatOptions = { //Typescript ways of adding the type
      year: "numeric",
      month: "long",
      day: "numeric",
    };
      return new Date(dateString).toLocaleDateString([], options);
    };
    console.log(formatDate(dateFromData)); // output will be: June 15, 1990

Answer 5

您可以使用Intl.DateTimeFormat来控制时间格式。 Intl.DateTimeFormat对象是对象的构造函数，这些对象支持对语言敏感的日期和时间格式。

       <span className="date timeago" title={ this.props.message.createdAt }>
            {new Intl.DateTimeFormat('en-GB', { 
                month: 'long', 
                day: '2-digit',
                year: 'numeric', 
            }).format(new Date(this.props.message.createdAt))}
      </span>

将显示示例：“ 2019年12月17日”格式。

Answer 6

只需跟进，您的所有答案都是正确的，但我遵循此代码。我可以使用Moment格式化日期，然后将其传递到数组中。但是开始只给了我一个undefined value

const data = upcomingWork.map(u => ({
  id: u.id,
  title: u.title,
  start: Moment(u.created_at.format('yyyy mm dd hh m')),
  end: u.created_at,
}));

在reactjs组件内部格式化日期

6 个答案: