老师，问一个关于ant desgin vue 的问题

Question

<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()是啥子意思啊…看了半天没看懂，这个返回的是无效时间，还是有效时间。其实最看不懂的就是，加入我只选了开始时间，那么结束时间是还没有选择的，这个时候结束时间的面板跳出来的时候，居然是可以当前时间的前面日期都不能选…这是我没看懂的地方。有劳老师解答一下。

Answer 1

张轩 2021-01-27 20:44:09

同学你好 这个函数返回的是 布尔值，当返回 false 的时候，当前的日历选择不会被禁用，都可以选择。当返回 true 的时候，整个日历被禁用，不可以选择。valueOf 是 moment 上面的一个方法，返回时间戳，越大的代表越晚。也就是说当 startValue 开始时间 大于（也就是晚于） endValue 结束时间，这个时候开始日历就不能选择了。结束时间是一个意思。

• 提问者 RadiomM #1

  老师，我的疑问就在这里。按照现在官方的案例，如果我选择了开始时间选择为27号的话，那么结束时间就只能在27或者以后选择。单纯看这个例子中的return  
  Statrvalue 大于等于  endvalue，实在看不出来。主要还是理出来的逻辑，再去看开始时间那边的又对不上逻辑了。太头痛了

• 张轩 回复 提问者 RadiomM #2

  官方的案例在哪里呢？我在 文档中并没有看到这个案例 https://2x.antdv.com/components/calendar-cn/

• 提问者 RadiomM 回复 张轩 #3

  有的，就是自定义范围，右边差不多最后的。

Answer 2

张轩 2021-01-26 18:15:49

同学你使用的新版的还是旧版的 ant-design-vue？2 版本是支持 vue3的，搞清楚版本我明天帮你调试看看

• 提问者 RadiomM #1

  用的是2版本的，就是vue3