带有ReactJS的Moment.js（ES6）

我不熟悉Moment.js。我正在为我的新项目使用ReactJS（ES6）。如何设置日期格式

我想在下面提到的循环中格式化我的

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

render（）{
返回(
{ 
this.props.data.map（（post，key）=>
{post.title}
{发布日期}



)}
);
}

由于您使用的是webpack，您应该能够导入

或
需要
片刻，然后使用它：

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

从“时刻”导入时刻
...
render（）{
返回(
{ 
this.props.data.map（（post，key）=>
{post.title}
{时刻（post.date）.format（）}



)}
);
}
...
我知道，这个问题有点老了，但既然我在这里，人们似乎还在寻找解决方案

我建议您使用
反应时刻

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

从“React”导入React；
从“反应力矩”导入力矩；
导出默认类MyComponent扩展React.Component{
render（）{
{this.props.dateToFormat}
}
}
我在react项目中使用了moment

import moment from 'moment'

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

从“时刻”导入时刻
状态={
开始日期：时刻（）
};
render（）{
const selectedDate=this.state.startDate.format（“Do MMMM YYYY”）；
返回(
{选定日期）
);
}
在我的例子中，我想获得几个国家的时区，首先安装即时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()}/>

如果其他答案失败，则将其作为

import moment from 'moment/moment.js'

可能有用。
将时刻导入到您的项目中

 import moment from react-moment

然后像这样使用它

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

返回(
{发布日期}
);
从“时刻”导入时刻；
.....
render（）{
返回(
{ 
this.props.data.map（（post，key）=>
{post.title}
{时刻（post.date）.calendar（）}



)}
);
}
我如下所述使用它，它工作得非常好

从“React”导入React；
从“时刻”导入*作为时刻
导出默认类MyComponent扩展React.Component{
render（）{
{矩（datetobeformat）.format（'DD/MM/YYYY'）}
}
}
run
npm i时刻反应时刻——保存

您可以在您的组件中使用它

从“反应时刻”导入时刻；

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

const date=新日期（）；
{date}

会给你这样的东西：

因此，我必须在我的ReactJS项目中将此历元时间戳日期格式格式化为合法日期格式。我执行了以下操作：

从“时刻”导入时刻
——假设您已经通过NPM安装了时刻js，如果没有


例如：

如果我有一个历元日期时间戳，比如
1595314414299
，那么我会尝试
在控制台中执行此操作以查看结果-



var dateInEpochTS=1595314414299
var now=时刻（dateInEpochTS）.format（'MMM DD YYYY h:mm A'）；
var now2=时刻（dateInEpochTS）.format（'ddddd，MMMM Do，yyyyy h:mm:ss A'）；
console.log（“现在”）；
console.log（现在）；
控制台日志（“NOW2”）；
console.log（now2）；
如果您正在使用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")}))

...

您是否与webpack或browserify捆绑？moment是否通过npm安装到您的应用程序中？如果是，您只需将其导入并像在正常情况下一样使用即可javascript@DavinTryon我正在使用webpack@erichardson30如何在HTML循环中使用矩js函数。？同意。或者，如果您不希望矩代码在JSX中，请创建一个格式date函数，该函数只返回新的格式化日期，并从JSX do
{this.formatDate（post.date）}
对我来说很有用，我唯一想说的是将它作为
import*as moment从'moment'导入。
答案应该包含一个简短的解释。这为项目增加了一个完全额外的包，增加了包的大小。为什么不这样做：{moment（This.props.dateToFormat）.format（'YYYY/MM/DD'）？这将为项目增加一个完全附加的包，以增加捆绑包的大小。为什么不直接执行：{moment（This.props.dateToFormat）.format（'yyyyy/MM/DD'）？这将为项目增加一个完全附加的包，以增加捆绑包的大小。为什么不直接执行：{moment（This.props.dateToFormat）.format（'YYYY/MM/DD'）？
const date = new Date();
<Moment format='MMMM Do YYYY, h:mm:ss a'>{date}</Moment>

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

...