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: () => [],
      }
    }
  }
Logo

前往低代码交流专区

更多推荐