Форматировать дату так долго внутри компонента reactjs

У меня есть такой компонент

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() внутри скобок, но получил ошибку.

Ответ 1

Просто сделайте это в JS обычным способом, прежде чем вы начнете возвращаться, и просто шаблон, который в:

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

И существует довольно много способов форматирования строк, в Date есть несколько встроенных (например, toLocaleString или toUTCString), или вы можете использовать специальный форматировщик, такой как moment.js.

Ответ 2

Вы можете запустить обычную версию JavaScript New Date(). Тем не менее, я бы настоятельно рекомендовал использовать 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 месяца назад. Это заставляет его звучать так, как написано человеком, и он не отображает тонны ненужной информации, если не указано. Я имею в виду, что большинство людей не хотят знать, сколько минут и секунд назад было, если это было несколько часов назад. Поэтому я порекомендовал эту библиотеку по этим причинам. Не стесняйтесь использовать vanilla JS, хотя, если вы предпочитаете, я просто считаю, что этот момент очень приятен для презентационных целей и позволяет мне не писать тонны математических функций для показа месяцев и т.д.

Ответ 3

Хотите этот формат?

Ср, 30 мая 2018 г.

Просто объявить

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

И тогда в вашем коде React JS

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

Метод toLocaleDateString() возвращает строку с чувствительным к языку представлением части даты этой даты

Источник и другие варианты

Ответ 4

Вы можете использовать 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>

Это приведет к примеру: "17 декабря 2019" формат.