check-work/src/components/TimePicker/TimePicker.vue

<template>
  <div class="d-flex flex-nowrap">
    <a-date-picker
      v-model="startValue"
      :disabled-date="disabledStartDate"
      show-time
      allow-clear
      :format="monthFormat"
      placeholder="起始时间"
      class="box box1"
      @openChange="handleStartOpenChange"
    />
    <a-date-picker
      v-model="endValue"
      :disabled-date="disabledEndDate"
      show-time
      allow-clear
      :format="monthFormat"
      class="box box2"
      placeholder="截止时间"
      :open="endOpen"
      @openChange="handleEndOpenChange"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      monthFormat: 'YYYY-MM-DD',
      startValue: null,
      endValue: null,
      endOpen: false,
    };
  },
  watch: {
    startValue(val) {
      console.log('startValue', val);
    },
    endValue(val) {
      console.log('endValue', val);
    },
  },
  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) {
      this.endOpen = open;
      if (!this.startValue) {
        this.$message.error('请选择起始时间');
      } else {
        const startTime = this.$moment(this.startValue).format('x');
        const endTime = this.$moment(this.endValue).format('x');
        const options = { startTime, endTime };
        this.$emit('changeTime', options);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  min-width: auto !important;
  width: 53% !important;
}

.box1 {
  margin-right: 2%;
}

.box2 {
  margin-left: 2%;
}
</style>