antdesginVue a-date-picker(日期时间选择器)禁用当前时间和之前的时间;禁用当前时间和之后的时间,包含时分秒

antdesginVue a-date-picker(日期时间选择器)禁用当前时间之前的时间,包含时分秒

话不多说直接上效果

1、禁用当前时间和之前的时间在这里插入图片描述

<a-form-item label="发生时间" name="start_time">
 <a-date-picker
    style="width: 100%"
    allowClear
    v-model:value="formState.start_time"
    show-time
    :disabledDate="disabledDate"
    :disabledTime="disabledDateTime"
    placeholder="请选择"
  />
</a-form-item>
import dayjs, { Dayjs } from 'dayjs'//按装dayjs 并引入



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

  const disabledDate = (current: any) => {
    return current && current < dayjs().subtract(1, 'day').endOf('day')
  }
  const disabledDateTime = (dates: any) => {
    const hours = dayjs().hour()
    const minutes = dayjs().minute()
    const seconds = dayjs().second()
    if (!dates) {
      dates = dayjs()
    }
    // 当日只能选择当前时间之后的时间点 如果不需要限制秒的话 将disabledSeconds所有行注释了就行
    // console.log(dates, dayjs(dates).date(), dayjs().date())
    if (dates && dayjs(dates).date() === dayjs().date()) {
      if (dayjs(dates).hour() === dayjs().hour()) {
        return {
          disabledHours: () => range(0, hours),
          disabledMinutes: () => range(0, minutes),
          disabledSeconds: () => range(0, seconds),
        }
      } else {
        return {
          disabledHours: () => range(0, hours),
          disabledMinutes: () => [],
          disabledSeconds: () => [],
        }
      }
    } else {
      return {
        disabledHours: () => [],
        disabledMinutes: () => [],
        disabledSeconds: () => [],
      }
    }
  }

2、禁用当前时间和之后的时间
在这里插入图片描述

import dayjs, { Dayjs } from 'dayjs'//按装dayjs 并引入


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

  const disabledDate = (current: any) => {
    return current && current > dayjs().endOf('day')
  }
  const disabledDateTime = (dates: any) => {
    const hours = dayjs().hour()
    const minutes = dayjs().minute()
    const seconds = dayjs().second()
    if (!dates) {
      dates = dayjs()
    }
    console.log(hours, 'hours')
    if (dates && dayjs(dates).date() === dayjs().date()) {
      if (dayjs(dates).hour() === dayjs().hour()) {
        console.log(44)
        return {
          disabledHours: () => range(hours + 1, 23),
          disabledMinutes: () => range(minutes + 1, 59),
          disabledSeconds: () => range(seconds + 1, 59),
        }
      } else {
        return {
          disabledHours: () => range(hours, 23),
          disabledMinutes: () => [],
          disabledSeconds: () => [],
        }
      }
    } else {
      return {
        disabledHours: () => [],
        disabledMinutes: () => [],
        disabledSeconds: () => [],
      }
    }
  }
  • 5
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值