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

<template>
  <div class="d-flex flex-nowrap">
    <a-date-picker
      v-model="startValue"
      :disabled-date="disabledStartDate"
      allow-clear
      locale="zh-cn"
      :format="monthFormat"
      placeholder="起始时间"
      class="box box1"
      :show-today="false"
      :open="startOpen"
      @openChange="handleStartOpenChange"
    >
      <template slot="renderExtraFooter">
        <a-button size="small" type="primary" ghost @click="setYesterday('startValue', 'startOpen')">昨天</a-button>
        <a-button class="ml-3" size="small" type="primary" ghost @click="setToday('startValue', 'startOpen')">今天</a-button>
      </template>
    </a-date-picker>
    <a-date-picker
      v-model="endValue"
      :disabled-date="disabledEndDate"
      allow-clear
      :format="monthFormat"
      class="box box2"
      :show-today="false"
      placeholder="截止时间"
      :open="endOpen"
      @openChange="handleEndOpenChange"
    >
      <template slot="renderExtraFooter">
        <a-button size="small" type="primary" ghost @click="setYesterday('endValue', 'endOpen')">昨天</a-button>
        <a-button class="ml-3" size="small" type="primary" ghost @click="setToday('endValue', 'endOpen')">今天</a-button>
      </template>
    </a-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      monthFormat: 'YYYY-MM-DD',
      startValue: null,
      endValue: null,
      startOpen: false,
      endOpen: false,
    };
  },
  watch: {
    endValue(val) {
      if (!this.startValue) {
        this.$message.error('请选择起始时间');
        return;
      }
      if (this.startValue && val) {
        const startTime = this.$moment(this.startValue).format('x');
        const endTime = this.$moment(this.endValue).format('x');
        const options = { startTime, endTime };
        this.$emit('changeTime', options);
      }
    },
  },
  methods: {
    // 昨天
    setYesterday(value, open) {
      this[value] = this.$moment(new Date().getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD');
      this[open] = false;
      if (open === 'startOpen' && !this.startOpen) {
        this.endOpen = true;
      }
    },

    setToday(value, open) {
      this[value] = this.$moment(new Date()).format('YYYY-MM-DD');
      this[open] = false;
      if (open === 'startOpen' && !this.startOpen) {
        this.endOpen = true;
      }
    },

    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) {
      this.startOpen = open;
      if (!open) {
        this.endOpen = true;
      }
    },
    handleEndOpenChange(open) {
      this.endOpen = open;
    },
  },
};
</script>

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

.box1 {
  margin-right: 2%;
}

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