reactjs - props - react helmet ssr

Momento js con React js(ES6)

Question

Soy nuevo para reaccionar js. Estoy usando Reactjs (ES6) para mi nuevo proyecto. ¿Cómo puedo usar moment.js para formatear la fecha?

Quiero formatear mi post.date en el siguiente bucle mencionado.

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

Answer 1

Como está usando un paquete web, debería poder import o require momento y luego usarlo:

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

Answer 2

Estoy usando el momento en mi proyecto de reacción

import moment from ''moment''

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

Answer 3

Lo sé, la pregunta es un poco vieja, pero como estoy aquí, parece que la gente todavía está buscando soluciones.

Te sugiero que utilices el link react-moment ,

react-moment viene con etiquetas JSX prácticas que reducen mucho trabajo. Como en tu caso: -

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

Answer 4

Si las otras respuestas fallan, importalo como

import moment from ''moment/moment.js''

podría funcionar.

Answer 5

en mi caso quiero obtener timeZone de varios países, primero instale js

npm install moment --save  

entonces instale moment-timezone.js

npm install moment-timezone --save

Entonces les importo en mi componente como este

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

entonces porque quiero obtener hora y minutos y segundo, me gusta esto

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

Answer 6

Importar momento a tu proyecto.

 import moment from react-moment

Entonces úsalo así

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

Answer 7

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