Момент js с реакцией js (ES6)

Я новичок в реагировании js. Я использую Reactjs (ES6) для моего нового проекта. Как использовать date.js для форматирования даты?

Я хочу отформатировать свой post.date в приведенном ниже цикле.

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

Ответ 1

Поскольку вы используете webpack, вы должны иметь возможность просто import или require момента, а затем использовать его:

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

Ответ 2

Я знаю, вопрос немного устарел, но, поскольку я здесь, похоже, люди все еще ищут решения.

Я предлагаю вам использовать ссылку на react-moment,

react-moment приходит с JSX тегами JSX которые уменьшают массу работы. Как и в вашем случае: -

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

Ответ 3

Я использовал его как следует, и он работает отлично.

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

Ответ 4

Если другие ответы терпят неудачу, импортируйте их как

import moment from 'moment/moment.js'

может работать.

Ответ 5

запустить npm i moment react-moment --save

Вы можете использовать это в своем компоненте,

import Moment from 'react-moment';

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

даст вам вот что:

Ответ 6

в моем случае я хочу получить timeZone из нескольких стран, первый момент установки js

npm install moment --save

затем установите момент-timezone.js

npm install moment-timezone --save

то я импортирую их в свой компонент, как это

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

то, потому что я получаю час и минуты, а второй отдельно, мне это нравится

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

Ответ 7

момент импорта в ваш проект

 import moment from react-moment

Тогда используйте это так

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

Ответ 8

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

Ответ 9

Я использую момент в своем проекте реагирования

import moment from 'moment'

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