javascript - How to convert timestamp in react.js - Stack Overflow

admin管理员组

文章数量:1178553

Im currently displaying a timestamp attached to each message sent in a message App Im building. However every stack overflow question I found on converting timestamps has to do with angular or native and I am trying to do this in react. Was wondering what code would I use to display something like (ex: 2/8/2018 11:04am || or something similar).

The current .push to the message array im using is:

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
    }
);

My git hub push for this was (Git Link)

Im currently displaying a timestamp attached to each message sent in a message App Im building. However every stack overflow question I found on converting timestamps has to do with angular or native and I am trying to do this in react. Was wondering what code would I use to display something like (ex: 2/8/2018 11:04am || or something similar).

The current .push to the message array im using is:

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
    }
);

My git hub push for this was (Git Link)

• javascript
• reactjs
• timestamp

Share Improve this question Follow edited Feb 8, 2018 at 16:09 Vladimir Panteleev 25.2k66 gold badges7979 silver badges119119 bronze badges asked Feb 8, 2018 at 16:08 GhoyosGhoyos 62233 gold badges77 silver badges1919 bronze badges 2

• Can you not use something like date-fns to transform the timestamp to something more readable like what you have above? – Adam Recvlohe Commented Feb 8, 2018 at 16:11
• Not sure how I would implement date-fns to my doc? – Ghoyos Commented Feb 8, 2018 at 16:14

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 25

Using Intl.DateTimeFormat

If you have the timestamp number you can get it formatted as you asked like this:

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));

If you want the date with one number instead of two (2/8/2018 vs 02/08/2018) just change the format from '2-digit' to 'numeric' on the corresponding time unit.

You can define method like this

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))

if you want to read detail about this check this post https://css-tricks.com/how-to-convert-a-date-string-into-a-human-readable-format/

Update

To get eg. 9PM or 9AM format add following code inside options

hour: 'numeric', hour12: true

If you would like to avoid handling timestamp with dedicated method/code, you could use directly an existing react component for that.

Fo example you could pick react-simple-timestamp-to-date and apply this in your render method:

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

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

本文标签： javascriptHow to convert timestamp in reactjsStack Overflow