arco design vue中日期时间选择器只能选当前日期时间之后的时间

1 组件使用

 <a-date-picker
   v-model="formModal.sendTime"
    :disabled-date="disabledDate"
    :disabled-time="disabledDateTime"
    show-time
    :show-now-btn="false"
  />

2 ts部分

<script lang="ts" setup>
  // 禁止选择当前时间之前的日期
  const disabledDate = (current: any) => {
    return current && current < dayjs().startOf('day');
  };

  const range = (start: number, end: number) => {
    const result = [];
    for (let i = start; i < end; i++) {
      result.push(i);
    }
    return result;
  };

  // 禁止选择当时之前的时刻
  const disabledDateTime = (dates: Date) => {
    const hours = dayjs().hour();
    const minutes = dayjs().minute();
    // const seconds = dayjs().second();
    // 当日只能选择当前时间之后的时间点
    if (dates && dayjs(dates).date() === dayjs().date()) {
      if (dayjs(dates).hour() === dayjs().hour()) {
        return {
          disabledHours: () => range(0, hours),
          disabledMinutes: () => range(0, minutes + 5),
          disabledSeconds: () => [],
        };
      }
      return {
        disabledHours: () => range(0, hours + 1),
        disabledMinutes: () => [],
        disabledSeconds: () => [],
      };
    }
    return {
      disabledHours: () => [],
      disabledMinutes: () => [],
      disabledSeconds: () => [],
    };
  };


</script>

3 效果

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值