Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

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

動作

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を付与し

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

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

https://stackoverflow.com/questions/29745873/hour-difference-between-two-timeshhmmss-ain-momentjs

https://momentjs.com/docs/#/durations/

ntm718
Laravelやってます。色々書きます!
https://blog.collapse-natsu.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away