• element-plus使用el-date-picker组件时,如何禁止用户选择当前时间之后的日时分秒


    element-plus使用el-date-picker组件时,如何禁止用户选择当前时间之后的日时分秒

    例:
    当前时间为2023-11-15 14.24,不能选择这之后的时分秒。(禁止用户选择2023-11-15 14.28)
    在这里插入图片描述

     <el-date-picker
      	   v-model="form.startTime"
           type="datetime"
           format="YYYY-MM-DD HH:mm:ss"
           value-format="YYYY-MM-DD HH:mm:ss"
           popper-class="no-now-date"
           :disabled-date="disabledDate"
           :disabled-hours="disabledHour"
           :disabled-minutes="disabledMinute"
         />
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    /* 限制天 */
    const disabledDate = (time: Date) => {
      return time.getTime() > Date.now()
    }
    /* 限制小时 */
    const disabledHour = (time: Date) => {
      const arrs = []
      // 当前本地时间的当天00:00 时间戳
      const timeDay = dayjs().startOf('day').valueOf()
      // 当前选中时间的当天00:00 时间戳
      const timeActiveDay = dayjs(searchParams.value.startTime).startOf('day').valueOf()
    
      if (timeDay > timeActiveDay) {
        console.log('小时可以随便选择')
      } else {
        console.log('小时存在限制')
        for (let i = 0; i < 24; i++) {
          if (new Date().getHours() >= i) continue
          arrs.push(i)
        }
      }
      return arrs
    }
    /* 限制分 */
    const disabledMinute = () => {
      const arrs = []
      // 当前本地时间的整点小时 时间戳
      const timeHour = dayjs().startOf('hour').valueOf()
      // 当前选中时间得整点小时 时间戳
      const timeActiveHour = dayjs(searchParams.value.startTime).startOf('hour').valueOf()
      if (timeHour > timeActiveHour) {
        console.log('分钟可以随便选择')
      } else {
        console.log('分钟存在限制')
        for (let i = 0; i < 60; i++) {
          if (new Date().getMinutes() >= i) continue
          arrs.push(i)
        }
      }
      return arrs
    }
    /* 限制秒 */
    const disabledSecond = () => {
      const arrs = []
      // 当前本地时间的整点分钟 时间戳
      const timeMin = dayjs().startOf('minute').valueOf()
      // 当前选中时间得整点分钟 时间戳
      const timeActiveMin = dayjs(searchParams.value.startTime).startOf('minute').valueOf()
      if (timeMin > timeActiveMin) {
        console.log('秒可以随便选择')
      } else {
        console.log('秒存在限制')
        for (let i = 0; i < 60; i++) {
          if (new Date().getSeconds() >= i) continue
          arrs.push(i)
        }
      }
      return arrs
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
  • 相关阅读:
    【笔记】Python网络爬虫与信息提取
    Docker compose
    工程管理系统之Spring Cloud+Spring Boot+Mybatis实现工程管理系统源码
    MindSpore社区群组介绍系列之四——WG-Research
    线程安全,这词你懂了吗?
    Spring高手之路11——BeanDefinition解密:构建和管理Spring Beans的基石
    【Effective_Objective-C_1熟悉Objective_C】
    full mesh
    Vue3实现tab切换
    Node.js v19,它来了。详解 6 大特性
  • 原文地址:https://blog.csdn.net/weixin_39550080/article/details/134440849