Vue.js + moment.jsで開始時刻と終了時刻から合計時間を算出する

より良い書き方手法ありましたら、ご教授いただけますと幸いです

開始時刻と終了時刻を入力時間がでる、勤怠のようなイメージです

動作

See the Pen 開始時刻と終了時刻から合計時間算出 by natusme (@natsume0718) on CodePen.

解説

JS

import moment from "moment";

export default {
  data() {
    return {
        start_time: "",
        ending_time: "",
    };
  },
  computed: {
    totalTime: function() {
      const start = moment.duration(this.start_time, "HH:mm");
      const end = moment.duration(this.ending_time, "HH:mm");
      const diff = end.subtract(start);
      if (diff.hours() < 0 || diff.minutes() < 0) {
        return "00:00";
      }
      const hours = diff.hours() < 10 ? "0" + diff.hours() : diff.hours();
      const minutes = diff.minutes() < 10 ? "0" + diff.minutes() : diff.minutes();
      return hours + ":" + minutes;
    }
  },
}

流れとしては
開始時刻と終了時刻をそれぞれバインディングして、どちらかが変更されたらcomputedプロパティで計算します

期間を作成するにはmoment.duration()を用います。公式
期間は時間の長さとして定義されます。
例えば、12:00だったら、00:00からの長さとして、hoursであれば12が得られます。

開始と終了をdurationオブジェクトで作成後、終了時刻から減算(subtract)して合計を求めています

差分がマイナスにしたくないので、マイナスの時は00:00返しています

また、時間、分ともに一桁の場合、頭に0を付与し

最後に時間と分を連結して返却しています。

参考にさせていただいたサイト