ant design vue 日期选择框 datePicker 如何动态的禁用时间？

Question

问题描述

时间选择器组件，禁用之前的时间。

目前的方案：拿到用户选择的时间，然后调用 disabledDateTime 修改禁用的范围，但是不工作。

 <a-date-picker
      format="YYYY-MM-DD HH:mm:ss"
      :disabled-date="disabledDate"
      :disabled-time="disabledDateTime"
      :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
      @change="dateChange"
    />

import moment from "moment";
export default {
  name: "Test",
  methods: {
    moment,
    range(start, end) {
      const result = [];
      for (let i = start; i < end; i++) {
        result.push(i);
      }
      return result;
    },
    disabledDate(current) {
      return current && current <= moment().subtract(1, "days").endOf("day");
    },

    disabledDateTime(type) {
      let disabledTime = {
        disabledHours: () => this.range(0, 24).splice(4, 20),
        disabledMinutes: () => this.range(30, 60),
        disabledSeconds: () => [],
      };
      switch (type) {
        case "day":
          disabledTime = {
            disabledHours: () => [],
            disabledMinutes: () => [],
            disabledSeconds: () => [],
          };
          break;

        default:
          break;
      }
      console.log("disabledTime");
      console.log(disabledTime);
      return disabledTime;
    },
    /*
    * 拿到用户选择的时间，然后调用 disabledDateTime 修改禁用的范围
    */
    dateChange(date, dateStr) {
      console.log(date);
      console.log((date - moment()) / (1000 * 60 * 60));
      console.log(dateStr);
      const diffHour = (date - moment()) / 3600000;
      if (diffHour >= 24) {
        console.log("时分秒不限制");
        this.$nextTick(() => {
          this.disabledDateTime("day");
        });
      } else if (1 <= diffHour && diffHour < 24) {
        console.log("限制时");
      } else if (1 / 60 <= diffHour && diffHour < 1) {
        console.log("限制时、分");
      } else if (diffHour < 1 / 60) {
        console.log("限制时、分、秒");
      } else {
        console.log("其他");
      }
    },
  },
};

期望：根据用户的选择禁用时间，比如今天12月24日12点30分，用户选择12月25日，所有时间都可选，用户选择选择了12月24日12点，分数禁用 0--30，秒不禁用。

Answer 1

示例：https://codepen.io/jamesfancy...

2021-01-04 更新

为了更明确地演示，我改了下 CodePen。现在的逻辑是：如果是当天，只允许选之后的小时，分秒任意。如果是明天或者以后，会根据小时来禁用分钟（以 12 点为分隔，禁前 30 分钟或后 30 分钟）

改的地方有两个：

1. 去掉了模板中的 @change 事件。因为 disabledTime 事件会传入当前已选的时间（含日期和时间的 moment 对象）
2. 去掉了 dateChange 方法（事件处理函数），改成了 getDisableHanlders，它会计算并返回一个 TimePicker 的 disabled 处理器对象。就是这里根据已选择时间的不同，来进行灵活地禁用。

---

原始答案

主要问题是不在自己去调 disabledDateTime，那是一个事件处理函数，由 DatePicker 调的。你能控制的只是 disabledHours 那三个函数的返回值。要他们的返回值是动态的，那就需要在 dateChange 事件里修改他们要返回的东西，比如 data

{
    data() {
        return {
            disHours: [],
            disMinus: [],
            disSecos: []
        };
    },
    
    disabledDateTime() {
        return {
            disabledHours: () => this.disHours,
            disabledMinutes: () => this.disMinus,
            disabledSeconds: () => this.disSecos,
        };
    }
    
    dateChange() {
        // 根据条件修改 disHours, disMinus 和 disSecos 等
    }

当然，disHours 等也可以是函数，但似乎没啥必要了。

再补充一下：disabledDateTime(date) 可以这样定义，它会传入选择的日期，这样就不需要在 dateChange() 中去处理逻辑。你可以把原来 dateChange 中的逻辑写在 disabledDateTime(date) 中去，把调用 disabledDateTime 改为 return { , , } 3 个判断函数对象。

---

去查 官方文档 API 部分 的“共同的 API ⇒ disabledDate 属性”，用函数控制，非常灵活。

示例在文档页左侧第 2 个：