105 moment.js

source: categories/study/vue-experiance/vue-experiance_9-99_06.md

105 moment.js

moment 메소드

moment() : 모멘트 객체 반환, 인자 빈값이면 현재 날짜로 모멘트 객체 생성

moment(날짜스트링) : 인자로 전달한 날짜로 모멘트 객체 생성

this.$moment() : vue에서 모멘트 객체 반환, 인자 빈값이면 현재 날짜로 모멘트 객체 생성

this.$moment(날짜스트링) : 인자로 전달한 날짜로 모멘트 객체 생성

moment().format(‘YYYY-MM-DD') : 날짜 형태

moment().subtract(1, ‘d') : 하루전

moment(날짜1).isAfter(날짜2) : 날짜1이 날짜2보다 뒤의 날짜인지, 2번째 인자로 날짜를 비교할건지 월을 비교할건지 연도를 비교할건지 선택 가능

moment(날짜1).isBefore(날짜2) : 날짜1이 날짜2보다 이전 날짜인지, 2번째 인자로 날짜를 비교할건지 월을 비교할건지 연도를 비교할건지 선택 가능

moment().clone() : 모멘트 객체 복사

moment().toDate() : 모멘트 객체를 자바스크립트 Date 객체로 변환

moment().isValid() : 해당 모멘트 객체(날짜)가 유효한지 아닌지

moment().add(1, ‘d') : 하루뒤

아래는 moment 스태틱 메소드인듯

Vue.moment.isDate(maxDate) : maxDate가 자바스크립트 Date 객체인지 아닌지 // isDate는 moment 스태틱 메소드인듯

moment.duration(endDate.diff(today)) : today와 endDate, 두 날짜 사이의 차이

moment.duration(endDate.diff(today)).asHours() : today와 endDate, 두 날짜 사이의 시간

moment.duration(endDate.diff(today)).asHours().toString() : today와 endDate, 두 날짜 사이의 시간을 문자열로 표시

moment.duration(endDate.diff(today)).asMinutes() : today와 endDate, 두 날짜 사이의 시간을 분으로 표시

moment.duration(endDate.diff(today)).asDays() : today와 endDate, 두 날짜 사이의 시간을 일로 표시

// subtract: 시간을 빼서 원래 순간을 변경한다.
// moment().add()와 정확히 동일하지만 추가하지않고 뺀다.
// this.$moment() 현재 날짜 정보가 담겨있는 모멘트 객체를 반환한다.
const end = this.$moment().subtract(1, 'd'); // 현재 날짜에서 하루를 빼준다.
// const start = end.clone().subtract(1, 'M'); // 하루뺀 날짜에서 1달을 빼준다.
// const start = end.clone().subtract(0, 'd'); // 하루뺀 날짜에서 0일을 빼준다. // 결국 그날
const start = end; // 생각해보니 이러면되잖아? 당일이니깐
this.maxDate = end.format('YYYY-MM-DD'); // 형태를 YYYY-MM-DD로 변경해준다.

// ------------------

const maxDate = this.$moment(this.maxDate).toDate(); // moment 객체를 Date 객체로 변환 toDate
const date = moment.getDefault(
    range,
    type,
    this.$moment(maxDate).isValid() ? maxDate : undefined, // maxDate가 유효한 값이면 maxDate를 세번째 인자로, 아니면 undefined 전달
);

// ------------------

function _getDefault(range, type, maxDate) {
    // maxDate가 자바스크립트 Date 객체인지 확인 isDate
    const today = Vue.moment.isDate(maxDate)
        ? Vue.moment(maxDate) // maxDate가 자바스크립트 Date 객체가 맞으면 moment객체 생성할 때 maxDate 날짜 집어넣어서 생성
        : Vue.moment(); // 아니면 그냥 생성
    let start;
    if (!type) {
        start = Vue.moment().add(range, 'days');
    } else if (type === 'YEAR') {
        start = Vue.moment().add(range, 'year');
    } else if (type === 'MONTH') {
        start = Vue.moment().add(range, 'months');
    } else if (type === 'WEEKS') {
        start = Vue.moment().add(range, 'weeks');
    }
    return {
        start: start.format('YYYY-MM-DD'),
        end: today.format('YYYY-MM-DD'),
    };
}

// ------------------

function setRangeDate(range, type) {
    const maxDate = this.$moment(this.maxDate).toDate(); // moment 객체를 Date 객체로 변환 toDate
    const date = moment.getDefault(
        range,
        type,
        this.$moment(maxDate).isValid() ? maxDate : undefined, // maxDate가 유효한 값이면 maxDate를 세번째 인자로, 아니면 undefined 전달
    );
    this.date.start = date.start;
    this.date.end = date.end;
}

// ------------------

function _convertDeadlineDt(date) {
    const today = Vue.moment();
    const endDate = Vue.moment(date);

    if (
        parseInt(Vue.moment.duration(endDate.diff(today)).asDays().toString()) > 0
    ) {
        return `마감 ${endDate.format('YYYY-MM-DD HH:mm')}`;
    } else if (
        parseInt(Vue.moment.duration(endDate.diff(today)).asHours().toString()) >
        0
    ) {
        return `마감 ${parseInt(
            Vue.moment.duration(endDate.diff(today)).asHours().toString(),
        )}시간 전`;
    } else if (
        parseInt(
            Vue.moment.duration(endDate.diff(today)).asMinutes().toString(),
        ) > 0
    ) {
        return `마감 ${parseInt(
            Vue.moment.duration(endDate.diff(today)).asMinutes().toString(),
        )}분 전`;
    } else {
        return '마감되었습니다.';
    }
}