CODEWITHSUNDEEP
javascriptreactjstimestamp
Ghoyos
Ghoyos

Reputation: 622

How to convert timestamp in react.js

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)

Upvotes: 10

Views: 86822

Answers (3)

Ankit Tiwari
Ankit Tiwari

Reputation: 4710

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

Upvotes: 8

Rodius
Rodius

Reputation: 2311

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.

Upvotes: 25

boly38
boly38

Reputation: 1955

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

Upvotes: 0

Related Questions