본문 바로가기
Front-end/React

[React] date format / moment

by 꼬바리 2021. 10. 28.

moment

 

Moment js는 날짜 및 시간에 대한 데이터를 이용할 경우, 가장 많이 사용되는 리액트 라이브러리입니다.

 

 

라이브러리 다운로드 

$ npm install moment --save
// 또는
$ yarn add moment

 

선언

import moment from 'moment';
//선언하지 않아도, 디바이스 혹은 locale의 시간을 불러온다. 
import 'moment/locale/ko';	//대한민국

 

Command

 

// format에 맞게 출력된다.
const nowTime = moment().format('YYYYMMDD HH:mm:ss');
console.log(nowTime);
// 출력 결과: 20210818 09:41:32

 

 

실제 사용예제

 

    var nowTime = moment().format('YYYY-MM-DD HH:mm:ss');
    console.log("nowTime : " + nowTime);

    var s_date = new Date(dataAll.startDate + " " + dataAll.startTime);
    var e_date = new Date(dataAll.endDate + " " + dataAll.endTime);
    var start_date = moment(s_date).format('YYYY-MM-DD HH:mm:ss');
    var end_date = moment(e_date).format('YYYY-MM-DD HH:mm:ss');

    if(start_date > end_date){
      alert("종료 시간은 시작 시간보다 빠를 수 없습니다.");
      return;
    }
    
    if(start_date == end_date){
      alert("시작 시간과 종료 시간이 같습니다.");
      return;
    }
    
    if(start_date > nowTime ){
      alert("검색 시작일을 잘못 설정 하였습니다.");
      return;
    }

    if(end_date > nowTime ){
      alert("검색 종료일을 잘못 설정 하였습니다.");
      return;
    }

moment 사용해서 날짜 validation 

 

728x90
반응형

댓글