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

news2024/10/6 12:24:56

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>
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()
    // 当日只能选择当前时间之后的时间点 如果不需要限制秒的话 将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: () => [],
      }
    }
  }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/706257.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C++模板进阶知识

文章目录 前言模板进阶1.非类型模板参数2.模板的特化2.1概念2.2函数模板特化2.3类模板特化2.3.1 全特化2.3.2 偏特化2.3.3 类模板特化应用示例 3.模板的分离编译3.1 什么是分离编译3.2 模板的分离编译3.3 解决方法 4 模板总结 后记 前言 之前我们讲过模板初阶的知识&#xff0…

Linux 解决root用户被限制连接服务器

Linux 解决root用户被限制连接服务器 1. 问题描述2. 解决问题2.1 方式一&#xff08;忘记root密码的情况&#xff09;2.2 方式二&#xff08;知道root密码的情况&#xff09; 3. 其他 1. 问题描述 使用 root 用户不能链接服务器&#xff0c;密码对&#xff0c;就是连接不上&am…

uniapp:分享一个自定义侧滑样例

首先看html,分为两部分&#xff0c;主体内容部分和功能部分&#xff0c;功能部分在css中定位到主体部分的右边 <view class"section" ref"box_center" touchstart"drawStart" touchmove"drawMove($event)"touchend"drawEnd($…

晨控智能UWB室内定位:工厂智能化的新引擎

晨控智能UWB室内定位&#xff1a;工厂智能化的新引擎 工厂是一个复杂而庞大的环境&#xff0c;通常包括多个车间、设备、人员以及大量的物料和产品。需要实时、准确的定位数据来支持各项运营活动。然而&#xff0c;传统的定位技术无法满足工厂内部的高精度定位需求。而UWB室内…

u-boot的烧写及使用,u-boot-2013.01的移植 6.30

1.将Linux的执行文件放到板子上运行 嵌入式系统 1.嵌入式系统 定制2.硬件&#xff1a;核心芯片底板软件&#xff1a;驱动应用 驱动系统应用&#xff08;并发&#xff0c;网络&#xff0c;文件。。。&#xff09;3.系统&#xff1a;linux 开源 模块化 支持芯片众多 功能…

针对字符串输入之间有空格的问题相关的问题

先说结论&#xff1a; bool flag true;while (cin >> s) {if (flag) {flag false;cout << s.size();} else {cout << , << s.size();}} 即用while&#xff08;cin>>s&#xff09;来输入&#xff0c;一段单词一段单词的来做&#xff08;遇到ci…

第十一章 原理篇:transformer模型入门

说在前面的话&#xff1a; 找工作面试不是特别顺利。进了目标公司的二面&#xff0c;但是一面面试官问的一些“新技术”问题答得不太好&#xff0c;尤其是transformer相关的。这一点确实是自己的问题&#xff0c;在工作后总是面向业务学习&#xff0c;对很多算法都是处于“听说…

AD从原理图到PCB超详细教程

AD超详细教程 前言一、建立一个工程模板二、原理图1.设计原理图。2.使用AD自带库和网上开源原理图库3.画原理图库4.编译原理图 三、PCB1.确定元器件尺寸大小2.绘制PCB Library①使用元器件向导绘制元件库②原理图与PCB的映射 3.绘制PCB①更新PCB②调整元件位置③布线④漏线检查…

库操作和表操作(数据库系列2)

目录 前言&#xff1a; 1.数据库的操作 1.1显示当前的数据库 1.2创建数据库 1.3使用数据库 1.4删除数据库 2.常用数据类型 2.1数值类型 2.2字符串类型 2.3日期类型 3.表的操作 3.1查看表结构 3.2创建表 3.3查看表 3.4删除表 结束语&#xff1a; 前言&#xff1…

【硬件自动化测试--测试软件的设计及实现】如何设计并实现!

今天来聊聊关于硬件方向的自动化软件设计及实现,后面我会用实例来让我们更加深入的了解硬件自动化,首先开发工具选择的是python语言,为啥选择python语言呢,因为他的语法比较简洁,外置库非常多,反正就是对于做自动化方面很实用就对了。 1.硬件自动化测试大致分为三个阶段实…

拓展:IDEA如何使用不同版本的JDK?(改了还报错很可能因为没改全,以mac为例)

以下面的案例为例 Enhanced ‘switch’ blocks are not supported at language level ‘8’ 后面知道是因为Spring的版本和JDK的版本不对应&#xff0c;结果网上找到的解决方案都很简单。下载了一个新版本的JDK&#xff0c;然后IDEA里面Project Structure的Project标签里把SDK给…

ubuntu的aarch64版本上安装anaconda

ubuntu的aarch64版本上安装anaconda 问题背景&#xff1a;今天在基于docker安装的ubuntu18-04的版本上想要安装anaconda&#xff0c;但是出现了问题&#xff0c;发现ubuntu的版本18-04对应的是aarch64&#xff0c;因此记录安装方法。 首先下载安装包没问题但是&#xff0c;在具…

机器学习复习7

机器学习复习7 1 - 根据下图中绘制的决策树&#xff0c;如果一个动物的耳朵是软的&#xff0c;脸型是圆的&#xff0c;并且有胡须&#xff0c;那么这个模型会预测它是猫还是不是猫&#xff1f; A. 不是猫 B. 是猫 **答案&#xff1a;B ** 2 - 以一棵决策树学习来对垃圾邮件和非…

spring boot启动原理分析

springboot启动类中有两个关键的地方 1.SpringBootApplication注解 2.SpringApplication.run方法 SpringBootApplication注解分析 SpringBootApplication注解由三大注解构成&#xff0c; SpringBootConfiguration、EnableAutoConfiguration、ComponentScan。 SpringBootCon…

Java-八股文-基础本部分<一>

Java基础部分 基础篇<一> Java基础部分 基础篇<二> Java基础部分 基础篇<三> Java基础部分 异常篇 Java基础部分 集合篇 Java基础部分 线程篇 ❤️ &#x1f9e1; &#x1f49b; &#x1f49a; &#x1f499; &#x1f49c;&#x1f5a4; &#x1f90d;…

什么是网络货运平台?

一、什么是网络货运平台&#xff1f; 网络货运平台是依托互联网平台整合配置运输资源&#xff0c;以承运人身份与托运人签订运输服务合同、承担承运人责任&#xff0c;委托实际承运人完成运输服务的物流平台。它通过互联网形式实现运输过程真实、公平、公正、合法&#xff0c…

【LeetCode】239. 滑动窗口最大值

239. 滑动窗口最大值 思路 当我们遍历数组时&#xff0c;我们需要维护一个双端队列&#xff0c;用于存储滑动窗口中的元素的索引。 队列中的元素按照降序排列&#xff0c;即「队头元素是当前滑动窗口中的最大值」。 具体的步骤如下&#xff1a; 创建一个双端队列 window&#…

Spring Boot中的Elasticsearch自动配置:原理与使用

Spring Boot中的Elasticsearch自动配置&#xff1a;原理与使用 简介 在Spring Boot中&#xff0c;Elasticsearch是非常流行的搜索引擎。为了方便开发人员使用Elasticsearch&#xff0c;Spring Boot提供了Elasticsearch自动配置功能。本文将介绍Elasticsearch自动配置的原理与…

burpsuite踩坑(一)

今天在使用burpsuite的时候&#xff0c;能抓到https或者http的包。 但是repeater模块无法使用&#xff0c;而且放行包之后&#xff0c;会出现提示。 搞了半天&#xff0c;以为是证书的问题&#xff0c;或者是burp汉化版的原因&#xff0c;还把汉化版的burp给删除了。 发现都…

【Docker】基于jib插件,实现Docker部署springboot项目

文章目录 创建springboot项目jib插件介绍使用打tar包 Docker部署springboot项目 在工作中&#xff0c;作为一名后端开发人员&#xff0c;项目部署运维的事我们可能都要同时干&#xff0c;今天想跟大家聊聊关于springboot项目使用docker部署相关操作。后期还会跟大家分享docker-…