Ant Design of Vue 中日期时间控件禁止选中的（日期——）设置

最新推荐文章于 2024-04-03 15:37:51 发布

原创最新推荐文章于 2024-04-03 15:37:51 发布 · 2.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#antd-vue

知识专栏收录该内容

139 篇文章

订阅专栏

本文介绍如何在Vue.js中使用Ant Design RangePicker组件，设置活动创建的开始时间必须比当前时间晚20分钟，并处理禁用日期和时间。涉及的方法包括`disabledDateTime`和`disabledDate`策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现控件
新建活动  限制开始时间  必须大于当前时间20分钟 

html

<a-range-picker
            :class="{'has-error':startHasError || endtHasError}"
            v-model="rangeTime"
            :disabled-date="disabledDate"
            :disabled-time="disabledDateTime"
            @calendarChange="panelChange"
            @openChange="handleOpenChange"
            style="width:380px;"
            @ok="onOk"
            show-time
            format="YYYY-MM-DD HH:mm:ss"
          />

js

data

rangeTime: [],
      disabledrangeHours: [],
      disabledrangeMinutes: [],
      startValue: null,
      endValue: null,
startHasError: false,
      endtHasError: false,


methods
// 时间禁止选中
    disabledDateTimehm(h, m, s) {
      this.disabledrangeHours = this.range(0, h);
      if (s) {
        this.disabledrangeMinutes = this.range(0, m);
      } else {
        this.disabledrangeMinutes = [];
      }
    },
    handleOpenChange(value) {
      this.startHasError = false;
      this.endtHasError = false;
      // this.disabledDateTimehm()
    },
    onOk(value) {
      this.startValue = value[0];
      this.endValue = value[1];
    },
    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) {
      if (type === "start") {
        return {
          disabledHours: () => this.disabledrangeHours,
          disabledMinutes: () => this.disabledrangeMinutes,
          disabledSeconds: () => []
        };
      }
      return {
        disabledHours: () => [],
        disabledMinutes: () => [],
        disabledSeconds: () => []
      };
    },
    panelChange(value) {
      if (
        value[0].year() == moment().year() &&
        value[0].month() == moment().month() &&
        value[0].date() == moment().date()
      ) {
        // 判断时间 是否禁用
        let date = moment().add(20, "m");
        let h = date.hour();
        let m = date.minute();
        if (value[0].hour() == h) {
          this.disabledDateTimehm(h, m, "h");
        } else {
          this.disabledDateTimehm(h, m);
        }
      } else {
        this.disabledrangeHours = [];
        this.disabledrangeMinutes = [];
      }

      if (value[0] && value[1]) {
        this.startValue = value[0];
        this.endValue = value[1];
        this.rangeTime = value;
      } else {
        this.startValue = "";
        this.endValue = "";
        this.rangeTime = [];
      }
    },