ant design vue3 日期选择器 disabledtime

在 Ant Design Vue3 中，日期选择器的 `disabledTime` 属性可以用于设置禁用时间范围。该属性可以是一个函数，也可以是一个数组。

如果 `disabledTime` 为函数，则函数接收一个参数 `current`，表示当前选择的日期。函数的返回值是一个对象，其中 `disabledHours` 和 `disabledMinutes` 属性分别表示禁用的小时和分钟的范围。例如，我们可以通过以下方式来禁用日期选择器中某些时间段：

<template>
  <a-date-picker :disabledTime="disabledTime"></a-date-picker>
</template>

<script>
export default {
  methods: {
    disabledTime(current) {
      if (current && current.hour() < 9) {
        return {
          disabledHours: () => [...Array(9).keys()],
          disabledMinutes: () => []
        };
      } else if (current && current.hour() >= 18) {
        return {
          disabledHours: () => [...Array(24 - 18).keys()],
          disabledMinutes: () => []
        };
      } else {
        // 其他情况不禁用
        return {
          disabledHours: () => [],
          disabledMinutes: () => []
        };
      }
    }
  }
};
</script>

上述代码中，我们禁用了选择时间早于上午9点和晚于下午6点的时间范围。

如果 `disabledTime` 为数组，则数组中的元素表示禁用的时间段，每个时间段是一个对象，包括 `start` 和 `end` 属性表示时间段的开始和结束时间。例如，我们可以通过以下方式来禁用日期选择器中某些特定的时间段：

<template>
  <a-date-picker :disabledTime="disabledTime"></a-date-picker>
</template>

<script>
export default {
  data() {
    return {
      disabledTime: [
        { start: moment('2022-01-01 09:00:00'), end: moment('2022-01-01 12:00:00') },
        { start: moment('2022-01-01 14:00:00'), end: moment('2022-01-01 18:00:00') }
      ]
    };
  }
};
</script>

上述代码中，我们禁用了 2022 年 1 月 1 日上午9点到中午12点和下午2点到晚上6点的时间范围。

以上就是 Ant Design Vue3 中使用 `disabledTime` 属性设置日期选择器禁用时间范围的方法。