开始时间、时间间隔、结束时间的计算（借助 moment.js）

96 阅读 0 评论 64 点赞

我是靠谱客的博主开朗小笼包，这篇文章主要介绍开始时间、时间间隔、结束时间的计算（借助 moment.js），现在分享给大家，希望可以做个参考。

框架：Vue + AntDesign
Form表单中有三个字段，开始时间（Ant的时间选择器）、时间间隔（输入框，格式为：xxHxxMIN，例：1H30MIN，表示1小时30分钟）、结束时间（Ant的时间选择器）

计算开始 / 结束时间

复制代码

calcStartEndTime() {
	let startTime = this.form.getFieldValue('formStartTime')
    let endTime = this.form.getFieldValue('formEndTime')
    let estTime = this.form.getFieldValue('formEstTime')
    if (startTime || endTime) {
      // 拆分预估时长
      let estHourTime = 0
      let estMinuteTime = 0
      let estMinuteTimeTemp = estTime
      // 取 hour
      if (estTime.includes('H')) {
        let estTimeArr = estTime.split('H')
        estHourTime = Number(estTimeArr[0])
        if (estTimeArr.length > 1) {
          estMinuteTimeTemp = estTimeArr[1]
        } else {
          estMinuteTimeTemp = ''
        }
      }
      // 取 minute
      if (estMinuteTimeTemp) {
        estMinuteTime = Number(estMinuteTimeTemp.split('MIN')[0])
      }
      // 开始时间存在 => 计算结束时间
      if (startTime) {
        // 做一次转换，否则在使用 startTime.add()时会修改 startTime对象本身
        startTime = moment(startTime.format())
        // 计算得出结束时间
        let formEndTime = startTime.add({hours: estHourTime ,minutes: estMinuteTime})
        this.form.setFieldsValue({formEndTime})
      } else {
        // 结束时间存在 => 计算开始时间
        endTime = moment(endTime.format())
        let formStartTime = endTime.subtract({hours: estHourTime ,minutes: estMinuteTime})
        this.form.setFieldsValue({formStartTime})
      }
    } else {
      this.$message.info('请设置开始时间，将自动计算结束时间')
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
calcStartEndTime() {
	let startTime = this.form.getFieldValue('formStartTime')
    let endTime = this.form.getFieldValue('formEndTime')
    let estTime = this.form.getFieldValue('formEstTime')
    if (startTime || endTime) {
      // 拆分预估时长
      let estHourTime = 0
      let estMinuteTime = 0
      let estMinuteTimeTemp = estTime
      // 取 hour
      if (estTime.includes('H')) {
        let estTimeArr = estTime.split('H')
        estHourTime = Number(estTimeArr[0])
        if (estTimeArr.length > 1) {
          estMinuteTimeTemp = estTimeArr[1]
        } else {
          estMinuteTimeTemp = ''
        }
      }
      // 取 minute
      if (estMinuteTimeTemp) {
        estMinuteTime = Number(estMinuteTimeTemp.split('MIN')[0])
      }
      // 开始时间存在 => 计算结束时间
      if (startTime) {
        // 做一次转换，否则在使用 startTime.add()时会修改 startTime对象本身
        startTime = moment(startTime.format())
        // 计算得出结束时间
        let formEndTime = startTime.add({hours: estHourTime ,minutes: estMinuteTime})
        this.form.setFieldsValue({formEndTime})
      } else {
        // 结束时间存在 => 计算开始时间
        endTime = moment(endTime.format())
        let formStartTime = endTime.subtract({hours: estHourTime ,minutes: estMinuteTime})
        this.form.setFieldsValue({formStartTime})
      }
    } else {
      this.$message.info('请设置开始时间，将自动计算结束时间')
    }
}

计算时间间隔

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
calcEstTime() {
    let startTime = this.form.getFieldValue('formStartTime')
    let endTime = this.form.getFieldValue('formEndTime')
    if (startTime && endTime) {
      let diffTime = endTime.diff(startTime)
      if (diffTime <= 0) {
        // 跨天 => 看着 startTime时间点比 endTime时间点晚，时间间隔就是(开始时间-24:00)+(00:00-结束时间)
        let diffTime1 = moment('24:00', 'HH:mm').diff(startTime)
        let diffTime2 = endTime.diff(moment('00:00', 'HH:mm'))
        diffTime = diffTime1 + diffTime2
      }
      let sumMinutes = diffTime / 1000 / 60
      let hours = Math.floor(sumMinutes / 60)
      let minutes = Math.floor(sumMinutes - hours * 60)
      let formEstTime = hours > 0 ? `${hours}H` : ''
      formEstTime += minutes > 0 ? `${minutes}MIN` : ''
      this.form.setFieldsValue({formEstTime})
    } else {
      this.$message.info('请设置开始时间和结束时间，将自动计算预估时长')
    }
}