iview TimePicker实现选择时间段

Posted 2020-12-07 nlovestudy

<FormItem label="拜访时间" prop="fromHospital">
<TimePicker
v-model="value"
format="HH:mm"
:value="value"
type="timerange"
placement="bottom-start"
placeholder="Select time"
style="width:310px"
@on-change="getDuration"></TimePicker>
</FormItem>

getDuration () {
  var startTime = this.value[0].split(‘:‘)
  var endTime = this.value[1].split(‘:‘)
  console.log(this.value[0])
  console.log(this.value[1])
  this.formItem.clinicalStartTimeStr = this.value[0]
  this.formItem.clinicalEndTimeStr = this.value[1]
  var time = (parseInt(endTime[0]) * 60 + parseInt(endTime[1])) - (parseInt(startTime[0]) * 60 + parseInt(startTime[1]))
  // 小时数
  var hour = parseInt(time / 60)
  var minute = time % 60
  if (hour > 0) {
    // return hour+"小时"+minute+"分钟"
    if (hour) {
      this.formValidate.duration = hour + ‘小时‘ + minute + ‘分钟‘
    } else {
      this.formValidate.duration = ‘‘
    }
  } else {
    if (!isNaN(minute)) {
      this.formValidate.duration = minute + ‘分钟‘
    } else {
      this.formValidate.duration = ‘‘
    }
  }
},