AntD vue日期选择器 结束时间 disabledTime函数

Ant Design Vue 的日期选择器（DatePicker）组件提供了 `disabledTime` 属性，该属性可以用来指定某些时间段内的时间是否可选。

如果你想让结束时间不可选，可以在 `disabledTime` 函数中根据当前选择的开始时间来判断。具体实现如下：

<template>
  <a-date-picker
    mode="range"
    :disabled-time="disabledTime"
    @change="handleDateChange"
  />
</template>

<script>
export default {
  data() {
    return {
      startValue: null,
      endValue: null,
    };
  },
  methods: {
    handleDateChange(values) {
      [this.startValue, this.endValue] = values;
    },
    disabledTime(current, type) {
      if (type === 'end') {
        // 如果当前选择的是结束时间，则判断是否在开始时间之前
        return {
          disabledHours: () => current && current < this.startValue,
          disabledMinutes: () => current && current < this.startValue,
          disabledSeconds: () => current && current < this.startValue,
        };
      }
      return {};
    },
  },
};
</script>

在上面的例子中，我们定义了一个 `startValue` 和一个 `endValue` 变量来保存用户选择的开始时间和结束时间。当用户选择一个开始时间时，我们会将其保存到 `startValue` 中；当用户选择一个结束时间时，我们会将其保存到 `endValue` 中，并使用 `disabledTime` 函数来判断该结束时间是否可选。

在 `disabledTime` 函数中，我们首先判断当前选择的是开始时间还是结束时间，如果是结束时间，则判断其是否在开始时间之前，如果是，则返回一个对象，该对象包含了 `disabledHours`、`disabledMinutes` 和 `disabledSeconds` 三个属性，分别表示不可选的小时、分钟和秒。否则，我们返回一个空对象，表示该时间段内的所有时间都可选。