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 프로젝트다음을 수행했습니다.
import moment from 'moment'
-- 이 링크로 향하지 않으면 NPM을 통해 설치된 모멘트 js가 있습니다.예:
다음과 같은 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
'programing' 카테고리의 다른 글
요소가 표시되지 않음 오류(요소를 클릭할 수 없음) (0) | 2023.02.26 |
---|---|
역직렬화 중 JSON.Net 무시 속성 (0) | 2023.02.26 |
Play 2.2 라이브러리로 밀봉된 특성을 위한 노이즈 프리 JSON 형식 (0) | 2023.02.26 |
Python: 간단한 설정/구성 파일을 저장하는 방법은 무엇입니까? (0) | 2023.02.26 |
WordPress에서 현재 사용자의 역할을 아는 방법 (0) | 2023.02.26 |