logo标签列表

使用ReactJS (ES6)与Moment.js

reactjsmomentjs
63

我刚接触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>
    );
}
你是在使用webpack还是browserify进行打包？ - Davin Tryon
你的应用程序是否通过npm安装了moment？如果是，你只需要导入它并像普通的javascript一样使用它。 - erichardson30
1
@DavinTryon 我正在使用 webpack - Jahanzaib Aslam
@erichardson30 我怎样在HTML循环中使用moment js函数？ - Jahanzaib Aslam
13个回答
1
 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>
   );
  }
0

给你！（神奇解决方案） 为了拥有一个占位符，你必须首先将你的状态设置为null，这样占位符才会显示出来，然后在用户从输入标签中选择日期后，状态将被挂载。

import React,{useState} from 'react'
function App(){
  const [startDate, setStartDate] = useState();
  
  return(
    <>
    <DatePicker
      placeholderText="Click to enter the start date"
      **selected={startDate===" " ? null : startDate}**
      onChange={(date) => new Date(setStartDate(date))}
      selectsStart
      startDate={startDate}
      endDate={endDate}
      
 
   />
)}
-1

我在我的React项目中使用Moment

import moment from 'moment'

state = {
    startDate: moment()
};
render() {
    const selectedDate = this.state.startDate.format("Do MMMM YYYY");
    return(
     <Fragment>
       {selectedDate)
     </Fragment>
   );
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接