vue.js - moment.js 를 이용한 날짜(시간) 차이 및 비교

moment.js 설치하기

npm install --save moment

 

moment.js 시작하기

require()를 선언하면 moment 를 사용할수 있게된다.

const moment = require('moment');
const today = moment();

 

Date Formatting

console.log(moment().format('YYYY-MM-DD HH:mm:ss'))
2021-01-06 21:32:54

 

Date formatting과 동일하다.

moment.js 테스트

 

소스

<template>
  <div class="container">
    <div>
      <Logo />
      <h1 class="title">
        현재 시간 비교 테스트
      </h1>
    </div>
    <input v-model="hour" type="number"> 시
    <input v-model="minute" type="number">분
    <input v-model="second" type="number">초
    <input type="button" value="현재 시간 비교" @click="diffTime"><br>
    {{ nowTime }} <br>
    {{ inputTime }} <br>
    {{ diffDate }}
  </div>
</template>

<script>
export default {
  data () {
    return {
      hour: '',
      minute: '',
      second: '',
      diffDate: '',
      nowTime: '',
      inputTime: ''
    }
  },
  watch: {},
  methods: {
    diffTime () {
      const moment = require('moment')
      const today = moment()
      const inputT = moment(this.hour + ':' + this.minute + ':' + this.second, 'HH:mm:ss')

      this.nowTime = '현재 시간 : ' + today.format('HH:mm:ss')
      this.inputTime = '입력 시간 : ' + inputT.format('HH:mm:ss')
      this.diffDate = '차이 ' + moment.duration(today.diff(inputT)).hours() + '시간' + moment.duration(today.diff(inputT)).minutes() + '분' + moment.duration(today.diff(inputT)).seconds() + '초'
    }
  }
}
</script>

 

 

날짜 비교 - Between

* 참고 momentjscom.readthedocs.io/en/latest/moment/05-query/06-is-between/

 

기본적으로 isBetween 메소드는 하나씩 추후 테스트 및 확인 예정

moment('2010-10-20').isBetween('2010-10-19', '2010-10-25'); // true
moment('2010-10-20').isBetween('2010-10-19', undefined); // true, since moment(undefined) evaluates as moment()

 

moment('2010-10-20').isBetween('2010-10-19', '2010-10-25'); // true
moment('2010-10-20').isBetween('2010-10-25', '2010-10-19'); // false

 

moment('2010-10-20').isBetween('2010-01-01', '2012-01-01', 'year'); // false
moment('2010-10-20').isBetween('2009-12-31', '2012-01-01', 'year'); // true

 

moment('2016-10-30').isBetween('2016-10-30', '2016-12-30', undefined, '()'); //false
moment('2016-10-30').isBetween('2016-10-30', '2016-12-30', undefined, '[)'); //true
moment('2016-10-30').isBetween('2016-01-01', '2016-10-30', undefined, '()'); //false
moment('2016-10-30').isBetween('2016-01-01', '2016-10-30', undefined, '(]'); //true
moment('2016-10-30').isBetween('2016-10-30', '2016-10-30', undefined, '[]'); //true

 

moment('2016-10-30').isBetween('2016-10-30', '2016-10-30', undefined, '(]'); //false