9

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)

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

3 Answers 3

21

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.

6

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

Add

hour: 'numeric', hour12: true

inside options if you want to specify time eg. 9PM or 9AM

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.