anted vue中，时间区间选择框，非日期选择

anted vue中，时间区间选择框

问题描述

有事场景下，需要只选择一个时间区间，而不需要选择日期，这时不能使用a-range-picker，
而是要使用两个a-date-picker组合实现

效果演示

这里只有时间选框的最底层代码，并没有添加时间哪个按钮的实现

代码实现

• 子组件myDate

<template>
  <div>
    <a-row :gutter="16" style="float:left;">
      <a-col :span="11">
        <a-date-picker
          style="width: 100%"
          mode="time"
          :disabledDate="disabledStartDate"
          :showTime="showTime"
          format="HH:mm"
          v-model="startValue"
          placeholder="开始时间"
          @openChange="handleStartOpenChange"
        ></a-date-picker>
      </a-col>
      <a-col :span="2">
        <div>~</div>
      </a-col>
      <a-col :span="11">
        <a-date-picker
          style="width: 100%"
          mode="time"
          :disabledDate="disabledEndDate"
          :showTime="showTime"
          format="HH:mm"
          placeholder="结束时间"
          v-model="endValue"
          :open="endOpen"
          @openChange="handleEndOpenChange"
        ></a-date-picker>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import ARow from 'ant-design-vue/es/grid/Row'
import ACol from 'ant-design-vue/es/grid/Col'
import moment from 'moment'

export default {
  name: 'MyDate',
  components: { ACol, ARow },
  props: {
    // 初始时间
    startTime: {
      type: String,
      default: null
    },
    // 结束时间
    endTime: {
      type: String,
      default: null
    }
  },
  data () {
    return {
      startValue: null,
      endValue: null,
      endOpen: false,
      showTime: { // 格式化分钟的时间选矿
        format: 'HH:mm'
      }
    }
  },
  methods: {
    // 保证结束时间大于开始时间
    disabledStartDate (startValue) {
      const endValue = this.endValue
      if (!startValue || !endValue) {
        return false
      }
      return startValue.valueOf() > endValue.valueOf()
    },
    // 保证结束时间大于开始时间
    disabledEndDate (endValue) {
      const startValue = this.startValue
      if (!endValue || !startValue) {
        return false
      }
      return startValue.valueOf() >= endValue.valueOf()
    },
    // 点开开始以后才能点开结束
    handleStartOpenChange (open) {
      if (!open) {
        this.endOpen = true
      }
    },
    handleEndOpenChange (open) {
      // 如果没有填写开始时间则提醒
      if (this.startValue === null) {
        this.$message.info('请先填写开始时间')
        this.endOpen = !open
        return
      }
      if (this.startValue != null) {
        this.endOpen = open
      }
      // 只有在开始时间和结束时间都不为空得时候才能提交
      if (this.startValue != null && this.endValue != null) {
        this.$emit('changeDate', this.startValue, this.endValue)
      }
    }
  },
  watch: {
    startTime: {
      deep: true,
      immediate: true,
      handler: function (newV) {
        if (newV != null) {
          this.startValue = moment(newV)
        }
      }

    },
    endTime: {
      deep: true,
      immediate: true,
      handler: function (newV) {
        if (newV != null) {
          this.endValue = moment(newV)
        }
      }
    }
  }
}
</script>

<style scoped>

</style>