Moment.js with ReactJS (ES6)

Question

I am new to Moment.js and using ReactJS (ES6) for my project. How can I use moment.js to format a date?

I want to format post.date in the below mentioned loop.

render() {
    return (
        <div>
            { 
            this.props.data.map((post,key) => 
                <div key={key} className="post-detail">
                    <h1>{post.title}</h1>
                    <p>{post.date}</p>
                    <p dangerouslySetInnerHTML={{__html: post.content}}></p>
                    <hr />
                </div>
            )}
        </div>
    );
}

Is moment installed to your app via npm? and if so, you just need to import it in and use it like you would in normal javascript — erichardson30
– erichardson30, Commented Jun 23, 2016 at 13:36
@erichardson30 How can I use moment js functions in HTML loop.? — Jahanzaib Aslam
– Jahanzaib Aslam, Commented Jun 23, 2016 at 13:38

Davin Tryon · Accepted Answer · 2016-06-23 13:42:12Z

125

Since you are using webpack you should be able to just import or require moment and then use it:

import moment from 'moment'

...
render() {
    return (
        <div>
            { 
            this.props.data.map((post,key) => 
                <div key={key} className="post-detail">
                    <h1>{post.title}</h1>
                    <p>{moment(post.date).format()}</p>
                    <p dangerouslySetInnerHTML={{__html: post.content}}></p>
                    <hr />
                </div>
            )}
        </div>
    );
}
...

answered Jun 23, 2016 at 13:42

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

erichardson30 Over a year ago

Agreed. Or if you don't want the moment code to be within the JSX, create a format date function that simply returns the new formatted date and from the JSX do <p>{this.formatDate(post.date)}</p>

Harsh Phoujdar Over a year ago

Worked for me, the only thing I would say is import it as import * as moment from 'Moment'

Dave Ranjan · Accepted Answer · 2017-06-11 18:32:52Z

20

I know, question is a bit old, but since am here looks like people are still looking for solutions.

I'll suggest you to use react-moment link,

react-moment comes with handy JSXtags which reduce a lot of work. Like in your case :-

import React  from 'react';
import Moment from 'react-moment';

exports default class MyComponent extends React.Component {
    render() {
        <Moment format="YYYY/MM/DD">{this.props.dateToFormat}</Moment>
    }
}

answered Jun 11, 2017 at 18:32

Dave Ranjan

2,99429 silver badges58 bronze badges

1 Comment

Petrogad Over a year ago

This adds an entirely additional package to the project increasing bundle size. Why not just do: <div>{moment(this.props.dateToFormat).format('YYYY/MM/DD')}</div> ?

Tyl · Accepted Answer · 2019-04-16 08:01:58Z

15

I have Used it as follow and it is working perfectly.

import React  from 'react';
import * as moment from 'moment'

exports default class MyComponent extends React.Component {
    render() {
            <div>
              {moment(dateToBeFormate).format('DD/MM/YYYY')}
            </div>            
    }
}

edited Apr 16, 2019 at 8:01

Tyl

5,28213 gold badges29 silver badges37 bronze badges

answered Apr 16, 2019 at 7:42

Anup Bangale

6418 silver badges7 bronze badges

Comments

meesvandongen · Accepted Answer · 2018-07-16 17:08:51Z

6

If the other answers fail, importing it as

import moment from 'moment/moment.js'

may work.

answered Jul 16, 2018 at 17:08

meesvandongen

3323 silver badges8 bronze badges

Comments

Alex Yao · Accepted Answer · 2019-09-01 21:35:21Z

5

run npm i moment react-moment --save

you can use this in your component,

import Moment from 'react-moment';

const date = new Date();
<Moment format='MMMM Do YYYY, h:mm:ss a'>{date}</Moment>

will give you sth like this :

answered Sep 1, 2019 at 21:35

Alex Yao

1191 silver badge7 bronze badges

1 Comment

Petrogad Over a year ago

This adds an entirely additional package to the project increasing bundle size. Why not just do: <div>{moment(this.props.dateToFormat).format('YYYY/MM/DD')}</div> ?

Kshitij Zutshi · Accepted Answer · 2020-08-04 07:51:07Z

So, I had to format this Epoch Timestamp date format to a legit date format in my ReactJS project. I did the following:

import moment from 'moment' -- given you have moment js installed via NPM, if not head to this link
For Example :

If I have an Epoch date timestamp like 1595314414299, then I try this in a console to see the result -

  var dateInEpochTS = 1595314414299
  var now = moment(dateInEpochTS).format('MMM DD YYYY h:mm A');
  var now2 = moment(dateInEpochTS).format('dddd, MMMM Do, YYYY h:mm:ss A');
  console.log("NOW");
  console.log(now);
  console.log("NOW2");
  console.log(now2);

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Expected Output

"NOW"
"Jul 21 2020 12:23 PM"
"NOW2"
"Tuesday, July 21st, 2020 12:23:34 PM"

Ghazaleh Javaheri · Accepted Answer · 2018-07-10 12:54:48Z

2

in my case i want getting timeZone of several country ,first install moment js

npm install moment --save

then install moment-timezone.js

npm install moment-timezone --save

then i import themn in my component like this

import moment from 'moment';
import timezone from 'moment-timezone'

then because iwant getting hour and minutes and second sepratly i do like this

<Clock minutes={moment().tz('Australia/Sydney').minute()} hour={moment().tz('Australia/Sydney').hours()} second={moment().tz('Australia/Sydney').second()}/>

answered Jul 10, 2018 at 12:54

Ghazaleh Javaheri

2,1561 gold badge25 silver badges25 bronze badges

Comments

Muhammad Awais · Accepted Answer · 2020-10-13 13:34:01Z

2

If you are working with API, then you can use it as:

import moment from 'moment'
...

        this.state = {
            List: []
        };
    }


    componentDidMount() {
        this.getData();
    }
    // Show List
    getData() {
        fetch('url')
            .then((response) => {
                response.json()
                    .then((result) => {
                        this.setState({ List: result })
                    })
            })
    }
this.state.List = 
this.state.List.map(row => ({...row, dob: moment(row.dob).format("YYYY/MM/DD")}))

...

answered Oct 13, 2020 at 13:34

Muhammad Awais

3053 silver badges3 bronze badges

Comments

Harrison Ekpobimi · Accepted Answer · 2018-12-18 12:02:14Z

1

import moment to your project

 import moment from react-moment

Then use it like this

return(
<Moment format="YYYY/MM/DD">{post.date}</Moment>
);

edited Dec 18, 2018 at 12:02

answered Dec 18, 2018 at 9:12

Harrison Ekpobimi

453 bronze badges

2 Comments

saiedmomen Over a year ago

Answers should contain a short explanation.

Petrogad Over a year ago

This adds an entirely additional package to the project increasing bundle size. Why not just do: <div>{moment(this.props.dateToFormat).format('YYYY/MM/DD')}</div> ?

Rashmi Singh · Accepted Answer · 2019-01-15 08:04:19Z

1

 import moment from 'moment';
 .....

  render() {
   return (
    <div>
        { 
        this.props.data.map((post,key) => 
            <div key={key} className="post-detail">
                <h1>{post.title}</h1>
                <p>{moment(post.date).calendar()}</p>
                <p dangerouslySetInnerHTML={{__html: post.content}}></p>
                <hr />
            </div>
        )}
    </div>
   );
  }

answered Jan 15, 2019 at 8:04

Rashmi Singh

517 bronze badges

Comments

Stanley Pierre Louis · Accepted Answer · 2021-08-12 07:31:05Z

1

To use momentjs in Reactjs , we need to use the "Formats dates,Relatives time, Calendar Time or Multiple Locale Support", according to your needs choose only one . Momentjs For examples:

 {orders.map((item) => (
      <Accordion defaultExpanded={true}>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls='panel1a-content'
          id='panel1a-header'
        >
          <Typography className={classes.heading}>
            {moment(item.created).format('MMM Do YY')} return  // Aug 12th 21 --> using Format Dates

answered Aug 12, 2021 at 7:31

Stanley Pierre Louis

411 silver badge3 bronze badges

Comments

Jamal Ashraf · Accepted Answer · 2022-02-11 14:35:00Z

0

HERE YOU GO! (MAGIC SOLUTION) In order to have a placeholder you must set your state to null first in the SELECTED property so that placeholder would be displayed and after that state would be mount with date user will select from the input tag.

import React,{useState} from 'react'
function App(){
  const [startDate, setStartDate] = useState();
  
  return(
    <>
    <DatePicker
      placeholderText="Click to enter the start date"
      **selected={startDate===" " ? null : startDate}**
      onChange={(date) => new Date(setStartDate(date))}
      selectsStart
      startDate={startDate}
      endDate={endDate}
      
 
   />
)}

answered Feb 11, 2022 at 14:35

Jamal Ashraf

1,1151 gold badge11 silver badges12 bronze badges

Comments

Nikhil · Accepted Answer · 2018-05-21 09:36:16Z

-1

I'm using moment in my react project

import moment from 'moment'

state = {
    startDate: moment()
};
render() {
    const selectedDate = this.state.startDate.format("Do MMMM YYYY");
    return(
     <Fragment>
       {selectedDate)
     </Fragment>
   );
}

answered May 21, 2018 at 9:36

Nikhil

1,34715 silver badges16 bronze badges

Collectives™ on Stack Overflow

Moment.js with ReactJS (ES6)

13 Answers 13

2 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

13 Answers 13

2 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related