<template>
  <a-date-picker
    v-model:value="startValue"
    :disabled-date="disabledStartDate"
    show-time
    format="YYYY-MM-DD HH:mm:ss"
    placeholder="Start"
    @openChange="handleStartOpenChange"
  />
  <a-date-picker
    v-model:value="endValue"
    :disabled-date="disabledEndDate"
    show-time
    format="YYYY-MM-DD HH:mm:ss"
    placeholder="End"
    :open="endOpen"
    @openChange="handleEndOpenChange"
  />
</template>
<script>
export default {
  data() {
    return {
      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;
    },
  },
};
</script>

我想问的是，这disabledStartDate跟disabledEndDate中的return false 跟return startValue.valueOf() > endValue.valueOf()是啥子意思啊…看了半天没看懂，这个返回的是无效时间，还是有效时间。其实最看不懂的就是，加入我只选了开始时间，那么结束时间是还没有选择的，这个时候结束时间的面板跳出来的时候，居然是可以当前时间的前面日期都不能选…这是我没看懂的地方。有劳老师解答一下。