Moment js with ReactJS ES6

Question

I am new to Moment js  I am using ReactJS  ES6  for my new project  How can I use moment js to format the date  I want to format my post date in the below mentioned loop  render         return            lt div gt                             this props data map  post key    gt                    lt div key  key  className  quot post-detail quot  gt                       lt h1 gt  post title  lt  h1 gt                       lt p gt  post date  lt  p gt                       lt p dangerouslySetInnerHTML     html  post content   gt  lt  p gt                       lt hr   gt                   lt  div gt                          lt  div gt

User · Answer

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              lt Moment format  YYYY MM DD  gt  this props dateToFormat  lt  Moment gt

User · Answer

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 -    x000D   x000D    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   x000D   lt script src  https   cdnjs cloudflare com ajax libs moment js 2 27 0 moment min js  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs react 16 6 3 umd react production min js  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs react-dom 16 6 3 umd react-dom production min js  gt  lt  script gt  x000D   x000D   x000D   Expected Output  quot NOW quot   quot Jul 21 2020 12 23 PM quot   quot NOW2 quot   quot Tuesday  July 21st  2020 12 23 34 PM quot

User · Answer

If the other answers fail  importing it as  import moment from  moment moment js    may work

User · Answer

import moment to your project    import moment from react-moment   Then use it like this  return   lt Moment format  YYYY MM DD  gt  post date  lt  Moment gt

User · Answer

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        lt Fragment gt          selectedDate        lt  Fragment gt

User · Answer

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                  lt div gt                 moment dateToBeFormate  format  DD MM YYYY                 lt  div gt

User · Answer

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   lt Clock minutes  moment   tz  Australia Sydney   minute    hour  moment   tz  Australia Sydney   hours    second  moment   tz  Australia Sydney   second     gt

User · Answer

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            lt div gt                             this props data map  post key    gt                    lt div key  key  className  post-detail  gt                       lt h1 gt  post title  lt  h1 gt                       lt p gt  moment post date  format    lt  p gt                       lt p dangerouslySetInnerHTML     html  post content   gt  lt  p gt                       lt hr   gt                   lt  div gt                          lt  div gt

User · Answer

run npm i moment react-moment --save  you can use this in your component   import Moment from  react-moment    const date   new Date     lt Moment format  MMMM Do YYYY  h mm ss a  gt  date  lt  Moment gt    will give you sth like this

User · Answer

import moment from  moment             render        return        lt div gt                     this props data map  post key    gt                lt div key  key  className  post-detail  gt                   lt h1 gt  post title  lt  h1 gt                   lt p gt  moment post date  calendar    lt  p gt                   lt p dangerouslySetInnerHTML     html  post content   gt  lt  p gt                   lt hr   gt               lt  div gt                  lt  div gt

User · Answer

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    gt                    response json                        then  result    gt                            this setState   List  result                                                this state List    this state List map row   gt       row  dob  moment row dob  format  quot YYYY MM DD quot

[reactjs] Moment.js with ReactJS (ES6)

Examples related to reactjs

Examples related to momentjs