使用ReactJS (ES6)与Moment.js

Question

我刚接触Moment.js并在我的项目中使用ReactJS（ES6）。我该如何使用moment.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>
    );
}

- Jahanzaib Aslam

---

你是在使用webpack还是browserify进行打包？ - Davin Tryon

你的应用程序是否通过npm安装了moment？如果是，你只需要导入它并像普通的javascript一样使用它。 - erichardson30

@DavinTryon 我正在使用 webpack - Jahanzaib Aslam

@erichardson30 我怎样在HTML循环中使用moment js函数？ - Jahanzaib Aslam

Answer 1

既然你正在使用Webpack，那么你只需要使用import或require导入Moment库，然后就可以使用它了：

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

- Davin Tryon

---

同意。或者如果您不想让瞬间代码在JSX中，可以创建一个格式化日期函数，该函数仅返回新的格式化日期，并从JSX中执行<p>{this.formatDate(post.date)}</p>。 - erichardson30

对我很有用，唯一要说的就是把它导入为import * as moment from 'Moment'。 - Harsh Phoujdar

Answer 2

我知道，这个问题有点老了，但是既然我在这里，看起来人们仍然在寻找解决方案。

我建议您使用react-moment链接，

react-moment带有方便的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>
    }
}

- Dave Ranjan

---

这将向项目添加完全额外的软件包，增加捆绑大小。为什么不直接这样做：<div>{moment(this.props.dateToFormat).format('YYYY/MM/DD')}</div>？ - Petrogad

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

- Anup Bangale

Answer 4

如果其他答案无法解决问题，可以尝试将其导入为：

import moment from 'moment/moment.js'

可能有效。

- meesvandongen

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

将会给你类似这样的东西：

- Alex Yao

---

这将为项目添加完全额外的包，增加捆绑大小。为什么不直接这样做：<div>{moment(this.props.dateToFormat).format('YYYY/MM/DD')}</div>？ - Petrogad

Answer 6

所以，在我的ReactJS项目中，我必须将这个时间戳的格式转换为一个合法的日期格式。我采取了以下措施：

1. import moment from 'moment' -- 假设您已经通过NPM安装了moment js，如果没有，请前往此链接

2. 例如：

   如果我有一个类似于1595314414299的时间戳，那么我可以在控制台中尝试下面的代码来查看结果 -

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

期望输出

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

- Kshitij Zutshi

Answer 7

在我的情况下，我想获取几个国家的时区，首先安装moment.js。

npm install moment --save  

然后安装moment-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()}/>

- Ghazaleh Javaheri

Answer 8

如果您正在使用API，则可以将其用作以下方式：

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

...

- Muhammad Awais

Answer 9

要在Reactjs中使用momentjs，我们需要使用“日期格式、相对时间、日历时间或多语言支持”，根据您的需求选择一个。Momentjs例如：

 {orders.map((item) => (
      <Accordion defaultExpanded={true}>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls='panel1a-content'
          id='panel1a-header'
        >
          <Typography className={classes.heading}>
            {moment(item.created).format('MMM Do YY')} return  // Aug 12th 21 --> using Format Dates

- Stanley Pierre Louis

Answer 10

将moment引入到您的项目中。

 import moment from react-moment

然后像这样使用它。

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

- Harrison Ekpobimi

---

答案应包含简短的解释。 - saiedmomen

这将为项目添加完全额外的包，增加捆绑大小。为什么不直接这样做：<div>{moment(this.props.dateToFormat).format('YYYY/MM/DD')}</div>？ - Petrogad