Moment.js 와 ReactJS (ES6)

Moment.js 와 ReactJS (ES6)

Moment.js는 처음이고 React JS(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>
    );
}

웹 팩을 사용하고 있기 때문에 다음 작업을 수행할 수 있습니다.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>
    );
}
...

알아요, 질문이 좀 오래됐지만, 여기 온 이후로 사람들이 아직도 해결책을 찾고 있는 것 같아요.

나는 당신이 그것을 사용하는 것을 제안합니다.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>
    }
}

아래와 같이 사용했는데 완벽하게 동작하고 있습니다.

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

다른 응답에 실패했을 경우, 로 Import 합니다.

import moment from 'moment/moment.js'

효과가 있을지도 모릅니다.

달려.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>

다음과 같은 것을 드립니다.

그래서 이 Epoch Timestamp 날짜 형식을 내 React에서 올바른 날짜 형식으로 지정해야 했습니다.JS 프로젝트다음을 수행했습니다.

1. import moment from 'moment'-- 이 링크로 향하지 않으면 NPM을 통해 설치된 모멘트 js가 있습니다.

2. 예:

   다음과 같은 Epoch 날짜 타임스탬프가 있는 경우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"

내 경우 여러 나라의 타임존을 얻고 싶다.처음 설치 순간 js

npm install moment --save  

다음으로 moment-timezone.module을 설치합니다.

npm install moment-timezone --save

이렇게 컴포넌트에 Import합니다.

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()}/>

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

...

프로젝트에 순간 가져오기

 import moment from react-moment

그럼 이렇게 쓰세요.

return(
<Moment format="YYYY/MM/DD">{post.date}</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).calendar()}</p>
                <p dangerouslySetInnerHTML={{__html: post.content}}></p>
                <hr />
            </div>
        )}
    </div>
   );
  }

Reactjs에서 momentjs를 사용하려면 필요에 따라 "Formats dates, relative time, Calendar time or Multiple Locale Support"를 사용해야 합니다.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

HERE YOU Go! (MAGIC SOLUTION) 플레이스 홀더를 설정하려면 먼저 SELECTED 속성에서 플레이스 홀더를 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}
      
 
   />
)}

리액션 프로젝트에서 모멘트를 사용하고 있습니다.

import moment from 'moment'

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

언급URL : https://stackoverflow.com/questions/37993202/moment-js-with-reactjs-es6