Question

我当前正在显示附加到消息App Im building中发送的每条消息的时间戳。但是，我在转换时间戳时发现的每个堆栈溢出问题都与角度或本机有关，我试图在做出反应时这样做。想知道我会用什么代码来显示（例如：2/8/2018 11:04 am ||或类似的东西）。

使用的当前.push到消息数组是：

this.messagesRef.push(
    {
        content: this.state.userMsg,
        roomId: this.props.activeRoom.key,
        username: (this.props.user ? this.props.user.displayName : 'guest'),
        sentAt: this.props.firebase.database.ServerValue.TIMESTAMP
    }
);

我的git hub推动这是(Git Link)

Answer 1

使用Intl.DateTimeFormat

如果你有时间戳编号，你可以按照你的要求格式化它：

const timestamp = Date.now(); // This would be the timestamp you want to format

console.log(new Intl.DateTimeFormat('en-US', {year: 'numeric', month: '2-digit',day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit'}).format(timestamp));

如果您希望日期为一个数字而不是两个（2/8/2018 vs 02/08/2018），只需在相应的时间单位上将格式从“2位数”更改为“数字”。

Answer 2

你也可以通过定义这样的方法来做到这一点

const dateString = '2020-05-14T04:00:00Z'

const formatDate = (dateString) => {
  const options = { year: "numeric", month: "long", day: "numeric" }
  return new Date(dateString).toLocaleDateString(undefined, options)
}

console.log(formatDate(dateString))

如果您想阅读有关此内容的详细信息，请查看此帖子 https://css-tricks.com/how-to-convert-a-date-string-into-a-human-readable-format/

Answer 3

如果您想避免使用专用方法/代码处理时间戳，您可以直接使用现有的 React 组件。

例如，您可以选择 react-simple-timestamp-to-date 并将其应用到您的渲染方法中：

import SimpleDateTime  from 'react-simple-timestamp-to-date';

(...)
  render() {
    return (
      <SimpleDateTime dateFormat="DMY" dateSeparator="/"  timeSeparator=":">{this.state.myTimestamp}</SimpleDateTime>
    );
  }

如何在react.js中转换时间戳

3 个答案: