退勤時間を記録するだけのサービスをVue.jsとFirebaseで作成した ref: https://qiita.com/Shino_JK/items/9393aaa0fabcba4702b3

file1.txt

      this.date.add(select, type)

file2.txt

'years', 
'months', 
'days', 
'hours', 
'minutes'

Main.vue

<template>
  <div id="main" class="container">
    <div class="card mt-3" v-if="user">
      <div class="card-body">
        <form class="create-todo">
          <div class="form-group">
            <div class="mt-2 d-inline-flex align-items-stretch">
              <div class="text-center m-2">
                <a class="mb-2" @click="setTimeUpDown('years', 1)"><i class="fas fa-caret-up" aria-hidden="true"></i></a>
                <p class="m-0 p-0">{{dateFormatted.YYYY}}</p>
                <a class="mt-2 pb-3" @click="setTimeUpDown('years', -1)"><i class="fas fa-caret-down" aria-hidden="true"></i></a>
              </div>
              <div class="text-center m-2 align-self-center">
                <p class="m-0 p-0">/</p>
              </div>
              <div class="text-center m-2">
                <a class="mb-2" @click="setTimeUpDown('months', 1)"><i class="fas fa-caret-up" aria-hidden="true"></i></a>
                <p class="m-0 p-0">{{dateFormatted.MM}}</p>
                <a class="mt-2 pb-3" @click="setTimeUpDown('months', -1)"><i class="fas fa-caret-down" aria-hidden="true"></i></a>
              </div>
              <div class="text-center m-2 align-self-center">
                <p class="m-0 p-0">/</p>
              </div>
              <div class="text-center m-2">
                <a class="mb-2" @click="setTimeUpDown('days', 1)"><i class="fas fa-caret-up" aria-hidden="true"></i></a>
                <p class="m-0 p-0">{{dateFormatted.DD}}</p>
                <a class="mt-2 pb-3" @click="setTimeUpDown('days', -1)"><i class="fas fa-caret-down" aria-hidden="true"></i></a>
              </div>
              <div class="text-center m-2">
                <p class="m-2 p-2"></p>
              </div>
              <div class="text-center m-2">
                <a class="mb-2" @click="setTimeUpDown('hours', 1)"><i class="fas fa-caret-up" aria-hidden="true"></i></a>
                <p class="m-0 p-0">{{dateFormatted.HH}}</p>
                <a class="mt-2 pb-3" @click="setTimeUpDown('hours', -1)"><i class="fas fa-caret-down" aria-hidden="true"></i></a>
              </div>
              <div class="text-center m-2 align-self-center">
                <p class="m-0 p-0">:</p>
              </div>
              <div class="text-center m-2">
                <a class="mb-2" @click="setTimeUpDown('minutes', 5)"><i class="fas fa-caret-up" aria-hidden="true"></i></a>
                <p class="m-0 p-0">{{dateFormatted.mm}}</p>
                <a class="mt-2 pb-3" @click="setTimeUpDown('minutes', -5)"><i class="fas fa-caret-down" aria-hidden="true"></i></a>
              </div>
              <!-- <date-picker v-model="date" :config="options"></date-picker> -->
            </div>
            <div class="mt-2 text-right">
              <button class="btn btn-success" @click="addCheckout">退勤打刻</button>
            </div>
          </div>
        </form>
      </div>
    </div>
    <!-- 省略 -->
  </div>
</template>

<script>
import { auth, database } from '@/utils/firebase'
import Works from './Works'

let workRef = database.ref('/workList')
export default {
  name: 'Main',
  data () {
    return {
      workList: [],
      date: Date,
      dateFormatted: {
        YYYY: '',
        MM: '',
        DD: '',
        HH: '',
        mm: ''
      },
      email: 'No User',
      user: null
    }
  },
  // 中略
  methods: {
    getNowTimeAtFormatted () {
      this.date = this.$moment()
      var select = this.date.format('mm') % 5
      // 5で割ったあまりで、5分刻みで時間を調整する
      switch (select) {
        case 0:
          this.date.add('minutes', -5)
          break
        case 1:
          this.date.add('minutes', -6)
          break
        case 2:
          this.date.add('minutes', -2)
          break
        case 3:
          this.date.add('minutes', -3)
          break
        case 4:
          this.date.add('minutes', -4)
          break
      }
      // 画面表示用のオブジェクトに代入
      this.dateFormatted.YYYY = this.date.format('YYYY')
      this.dateFormatted.MM = this.date.format('MM')
      this.dateFormatted.DD = this.date.format('DD')
      this.dateFormatted.HH = this.date.format('HH')
      this.dateFormatted.mm = this.date.format('mm')
    },
    setTimeUpDown (type, select) {
      // 変更する時刻と、変更量を指定すると、dateオブジェクトに対して時刻を変更する。
      this.date.add(select, type)
      // 画面表示用のオブジェクトに代入
      this.dateFormatted.YYYY = this.date.format('YYYY')
      this.dateFormatted.MM = this.date.format('MM')
      this.dateFormatted.DD = this.date.format('DD')
      this.dateFormatted.HH = this.date.format('HH')
      this.dateFormatted.mm = this.date.format('mm')
    },
    // 省略
  }
}
</script>