JavaScript에서 날짜 Date관련 사용에 유용한 moment.js 다운로드 및 사용 방법

 

현재 자바스크립트에서 가장 유용하게 사용되고 있는 moment의 사용방법과 응용하는 방법을 소개한다.

 

■ 인스톨
http://momentjs.com/ 에서 다운로드 하여 사용할 페이지에 로드시켜 준다.

 

■ 준비

// moment를 초기화 한다
var m = moment();
 
// format으로 출력한다
var output = m.format("YYYY년MM월DD일 HH:mm:ss dddd");
console.log(output);  // => 2016년07월12일 12:34:56 Wednesday 

 

■ 사용 방법

moment 개체에는 많은 초기화 방법이 준비되어 있다. 특히 두 번째 인수로 입력 값의 포맷을 지정하는 기능 덕분에 어떠한 날짜 형식에서도 유연하게 객체를 생성 할 수 있도록 되어있다.

// 현재시각
moment();
 
// 밀리 초로 지정
moment(1368543600000); 
 
// 타임스탬프(초)로 지정
moment.unix(1368543600);
 
// Date.parse에서 해석 가능한 문자열로 지정
moment("June 12, 2016");
 
// Date오브젝트로부터 초기화
moment(new Date(2016, 7, 12));
 
// 배열로부터 초기화
moment([2016, 7, 12]); // ※month는 -1한 값을 지정
 
// 다른 moment오브젝트로부터 초기화
moment(moment([2016, 7, 12]));
  
// 제2 인수로 입력값 포맷을 지정하여 초기화
moment("12-07-2016", "DD-MM-YYYY");
moment("20160712", "YYYYMMDD");
moment("2016년07월12일", "YYYY년MM월DD일"); // 실제로는"YYYYMMDD"만으로 지정해도 된다.
moment(1368543600 + "", "X");

※더 자세한 포맷 지정 방법에 대해서는 이곳을 참조.

 

■ 출력 방법

var m = moment();
 
// format을 지정하여 출력
m.format("YYYY년MM월DD일 ddd");
 
// 각 단위 메소드
m.year();    // 년
m.month();   // 월 ※ 0〜11의 값
m.date();   // 일
m.day();    // 요일
m.hours();    // 시
m.minutes();  // 분
m.seconds();  // 초
m.milliseconds();  // 밀리 초 
 
각 단위 당 메서드는 값을 취득하거나 설정하여 사용된다. 인수를 넘겨주면 setter, 인수가 없으면 getter로 취급한다. 또한 예에 따라 month은 0~11의 값을 취급한다. 
m.month (4)을 set하면 5월의 moment 객체가지만,그 m.month ()를 get 을 취하면 현재 달의 수치가 반환된다.
 
var m = moment("2016-07-12", "YYYYMMDD");
m.month(); // => 0
m.month(10).format("YYYY-MM-DD"); // => 2016-07-12

 

■ 사용 방법 (응용편)▷ 요일을 한글로 출력하고 싶을 경우

// lang:ko를 등록한다. 한번 지정하면 자동적으로 사용된다.
moment.lang('ko', {
    weekdays: ["일요일","월요일","화요일","수요일","목요일","금요일","토요일"],
    weekdaysShort: ["일","월","화","수","목","금","토"],
});
 
// moment를 생성
var m = moment("May 15, 2013");
 
// 한국어로 출력
m.format("MM/DD (ddd) dddd"); // => 07/12 (수) 수요일
 
// 다시 영어로 출력하고 싶을 때
m.lang("en").format("MM/DD (ddd) dddd"); // => 07/12 (Wed) Wednesday

 

▷ 이번달 1일의 요일을 수값으로 얻기

// day메소드가「요일」(0〜6) 으로 반환되며 date 메소드에서는 「일」 (1〜31)로 반환된다. 
moment().date(1).day(); // => 3  （수요일）

 

▷ 이번주 월요일의 정확한 타임스탬프 취득

moment()
  .day(1)     // day로 요일 지정. 0:일요일 〜 6:토요일
  .hours(12)  // 12시를 지정
  .minutes(0).seconds(0).milliseconds(0) // 이걸 지정하지 않으면 현재 시각의 분,초가 지정된다.
  .format("X"); // => 1368414000

 

▷ 지정한 날이 존재하는지 확인

moment("2016-02-30", "YYYY-MM-DD").isValid(); // => false

 

▷ 오늘부터 30일 후의 날짜 취득

moment().add("days", 30).format("YYYY년MM월DD일"); // => 2016년08월11일

 

▷ 이번 달은 며칠까지 있는지 확인

moment().daysInMonth() // => 31

 

▷ 특정일로부터 며칠 지났는지 확인

moment().diff(moment([2016, 3, 1]), "days");

 

▷ 날짜A가 날짜B보다 미래인지 체크

var momentA = moment([2016, 3, 1]);
var momentB = moment([2016, 5, 1]);
momentA.isAfter(momentB); // => false

 

▷ moment 오브젝트의 클론 생성

var baseMoment = moment();
var cloneMoment = baseMoment.clone();

 

이상 개발에 특히 도움이 될만한 것들을 모아보았다. 이외에도 많은 기능이 moment.js에 구현되어 있으므로 다음의 문서를 참고하면 된다. Docs