Moment.js cu ReactJS (ES6) (Programare, Reactjs, Momentjs)

Jahanzaib Aslam a intrebat.

Sunt nou în Moment.js. Folosesc ReactJS (ES6) pentru noul meu proiect. Cum pot utiliza moment.js pentru a formata data?

Vreau să formatez post.date în bucla menționată mai jos.

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

Comentarii

  • Faceți pachet cu webpack sau browserify? –  > Por Davin Tryon.
  • Momentul este instalat în aplicația dvs. prin intermediul npm? și dacă da, trebuie doar să îl importați și să îl folosiți așa cum ați face-o în javascript normal –  > Por erichardson30.
  • @DavinTryon Eu folosesc webpack –  > Por Jahanzaib Aslam.
  • @erichardson30 Cum pot folosi funcțiile moment js în bucla HTML.? –  > Por Jahanzaib Aslam.
11 răspunsuri
Davin Tryon

Din moment ce utilizați webpack ar trebui să puteți doar import sau require moment și apoi să-l utilizați:

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

Comentarii

  • De acord. Sau dacă nu doriți ca codul momentului să fie în JSX, creați o funcție de formatare a datei care pur și simplu returnează noua dată formatată și din JSX faceți <p>{this.formatDate(post.date)}</p> –  > Por erichardson30.
  • A funcționat pentru mine, singurul lucru pe care l-aș spune este să îl importați ca import * as moment from 'Moment' –  > Por Harsh Phoujdar.
Dave Ranjan

Știu, întrebarea este un pic mai veche, dar din moment ce sunt aici se pare că oamenii sunt încă în căutarea de soluții.

Vă sugerez să folosiți react-moment link,

react-moment vine cu la îndemână JSXtag-uri care reduc foarte mult munca. Ca în cazul tău :-

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

Comentarii

  • Acest lucru adaugă un pachet complet suplimentar la proiect, mărind dimensiunea pachetului. De ce nu faceți doar: <div>{moment(this.props.dateToFormat).format(‘YYYY/MM/DD’)}</div> ? –  > Por Petrogad.
Anup Bangale

L-am folosit după cum urmează și funcționează perfect.

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

meesvandongen

În cazul în care celelalte răspunsuri nu reușesc, importarea ca

import moment from 'moment/moment.js'

poate funcționa.

Alex Yao

rulați npm i moment react-moment --save

puteți utiliza acest lucru în componenta dvs,

import Moment from 'react-moment';

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

îți va da ceva de genul acesta :

Comentarii

  • Acest lucru adaugă un pachet complet suplimentar la proiect, mărind dimensiunea pachetului. De ce nu faceți doar: <div>{moment(this.props.dateToFormat).format(‘YYYY/MM/DD’)}</div> ? –  > Por Petrogad.
Kshitij Zutshi

Așadar, a trebuit să formatez acest format de dată Epoch Timestamp într-un format de dată legitim în proiectul meu ReactJS. Am făcut următoarele:

  1. import moment from 'moment' — având în vedere că aveți moment js instalat prin NPM, dacă nu, mergeți la acest link

  2. De exemplu :

    Dacă am o dată Epoch timestamp ca 1595314414299, atunci încerc acest lucru într-o consolă pentru a vedea rezultatul –

Rezultatul așteptat

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

ghazaleh javaheri

în cazul meu vreau să obțin timeZone din mai multe țări, mai întâi instalez moment js

npm install moment --save  

apoi instalați moment-timezone.js

npm install moment-timezone --save

apoi le import în componenta mea, după cum urmează

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

apoi, pentru că vreau să obțin ora și minutele și secundele separat, fac așa

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

Harrison Ekpobimi

importați moment în proiectul dvs.

 import moment from react-moment

Apoi, utilizați-o astfel

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

Comentarii

  • Răspunsurile trebuie să conțină o scurtă explicație. –  > Por saiedmomen.
  • Acest lucru adaugă un pachet complet suplimentar la proiect, mărind dimensiunea pachetului. De ce nu faceți doar: <div>{moment(this.props.dateToFormat).format(‘YYYY/MM/DD’)}</div> ? –  > Por Petrogad.
Rashmi Singh
 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>
   );
  }

Muhammad Awais

Dacă lucrați cu API, atunci îl puteți utiliza ca:

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

...

Nikhil

Folosesc momentul în proiectul meu react

import moment from 'moment'

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