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

这篇具有很好参考价值的文章主要介绍了antdesginVue a-date-picker(日期时间选择器)禁用当前时间之前的时间,包含时分秒。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

话不多说直接上效果

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

<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、禁用当前时间和之后的时间
antdesginVue a-date-picker(日期时间选择器)禁用当前时间之前的时间,包含时分秒文章来源地址https://www.toymoban.com/news/detail-510919.html

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

到了这里,关于antdesginVue a-date-picker(日期时间选择器)禁用当前时间之前的时间,包含时分秒的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包