web-dev-qa-db-fra.com

Moment js avec React js (ES6)

Je suis nouveau pour réagir js. J'utilise Reactjs (ES6) pour mon nouveau projet. Comment puis-je utiliser moment.js pour formater la date?

Je veux formater mon post.date dans la boucle mentionnée ci-dessous.

 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>
    );
}
reactjsmomentjs
20
Jahanzaib Aslam

Puisque vous utilisez webpack, vous devriez être capable de juste import ou require moment et ensuite l'utiliser

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>
    );
}
...
48
Davin Tryon

Je sais que la question est un peu ancienne, mais depuis que je suis ici, on dirait que les gens sont toujours à la recherche de solutions.

Je vous suggère d'utiliser react-momentlink ,

react-moment est livré avec des balises JSX très pratiques qui réduisent beaucoup de travail. Comme dans votre cas: -

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>
    }
}
11
Dave Ranjan

Si les autres réponses échouent, importez-le en tant que

import moment from 'moment/moment.js'

peut travailler.

2
meesvandongen

Importer le moment dans votre projet  

 import moment from react-moment

Alors utilise-le comme ça 

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

dans mon cas, je veux obtenir le fuseau horaire de plusieurs pays, installez le premier moment js

npm install moment --save

puis installez moment-timezone.js

npm install moment-timezone --save

alors je les importe dans mon composant comme celui-ci 

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

alors parce que je veux obtenir l'heure et les minutes et la deuxième séparément, je fais comme ça

<Clock minutes={moment().tz('Australia/Sydney').minute()} hour={moment().tz('Australia/Sydney').hours()} second={moment().tz('Australia/Sydney').second()}/>
0
ghazaleh javaheri
 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>
   );
  }
0
Rashmi Singh