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

实现控件
新建活动  限制开始时间  必须大于当前时间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 = [];
      }
    },





 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值