ElementUI 时间选择器如何限定选择时间

DatePicker 日期选择器 | Element Plus

我们如何限定我们的选择时间呢,比如限定选择时间为今天之前,或者今天之后的时间?

我们可以使用官方提供的disabled-date来实现

 我们通过这个属性 做一个回调函数,在里面比较我们想要限定的时间范围,然后将结果return 就能完成时间范围的限定了 return的结果为置灰的。

我这里比较时间范围 将大于今天的时间返回,所以大于今天的时间就都置灰不可选择了。

<el-form-item label="选择时间 :" prop="endTime"><el-date-pickerv-model="formInline.endTime"type="date"format="YYYY/MM/DD"value-format="YYYY-MM-DD"placeholder="请选择年月日":disabledDate="formatData"clearable/>
</el-form-item>
const formatData = (val: any) => {// 获取当前日期const currentDate = new Date();// 将时间戳转换为日期对象const selectedDate = new Date(val);// 比较选择的日期是否在当前日期之后return selectedDate.getTime() > currentDate.getTime();
};

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

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

相关文章

鸿蒙方舟开发框架ArkUI简介

语雀知识库地址&#xff1a;语雀HarmonyOS知识库 飞书知识库地址&#xff1a;飞书HarmonyOS知识库 嗨&#xff0c;各位别来无恙呐&#xff0c;我是小白 众所周知&#xff0c;华为在今年推出了 HarmonyOS 4.0 版本&#xff0c;而在此之前的版本中&#xff0c;HarmonyOS 应用的 …

2024年AI视频识别技术的6大发展趋势预测

随着人工智能技术的快速发展&#xff0c;AI视频识别技术也将会得到进一步的发展和应用。2023年已经进入尾声&#xff0c;2024年即将来临&#xff0c;那么AI视频识别技术又将迎来怎样的发展趋势&#xff1f;本文将对2023年的AI视频技术做一个简单的盘点并对2024年的发展趋势进行…

Advanced Renamer

Advanced Renamer 安装链接 1.前后添加字符 2.字符转数字&#xff0c;编号整体加减

oracle实验2023-12-8--触发器

第十四周实验 【例】功能要求&#xff1a;增加一新表XS_1&#xff0c;表结构和表XS相同&#xff0c;用来存放从XS表中删除的记录。 分析: 1、创建表 xs_1 SQL> create table xs_1 as select * from xs; Table created SQL> truncate table xs_1; Table truncated题目&a…

StoneDB-8.0-V2.2.0 企业版正式发布!性能优化,稳定性提升,持续公测中!

​ 11月&#xff0c;StoneDB 新版本如期而至&#xff0c;这一个月来我们的研发同学加班加点&#xff0c;持续迭代&#xff1a;在 2.2.0 版本中&#xff0c;我们针对用户提出的需求和做出了重量级更新&#xff0c;修复了一些已知和用户反馈的 Bug&#xff0c;同时对部分代码进行…

PairLIE论文阅读笔记

PairLIE论文阅读笔记 论文为2023CVPR的Learning a Simple Low-light Image Enhancer from Paired Low-light Instances.论文链接如下&#xff1a; openaccess.thecvf.com/content/CVPR2023/papers/Fu_Learning_a_Simple_Low-Light_Image_Enhancer_From_Paired_Low-Light_Instan…

Kafka安全性探究:构建可信赖的分布式消息系统

在本文中&#xff0c;将研究Kafka的安全性&#xff0c;探讨如何确保数据在传输和存储过程中的完整性、机密性以及授权访问。通过详实的示例代码&#xff0c;全面讨论Kafka安全性的各个方面&#xff0c;从加密通信到访问控制&#xff0c;帮助大家构建一个可信赖的分布式消息系统…

Vue:用IDEA开发Vue,标签语法爆红问题处理

一、场景描述 我在IDEA中&#xff0c;学习Vue课程。 入门学习时&#xff0c;是在html文件中&#xff0c;script引入vue.js文件方式。 此时&#xff0c;在html文件中用v-标签&#xff0c;爆红。 二、解决办法 打开 菜单栏 File - Settings 选择 Editor - Files Type&#xf…

《每天一个Linux命令》 -- (5)通过sshkey密钥登录服务器

欢迎阅读《每天一个Linux命令》系列&#xff01;在本篇文章中&#xff0c;将介绍通过密钥生成&#xff0c;使用公钥连接管理服务器。 概念 SSH 密钥是用于安全地访问远程服务器的一种方法。SSH 密钥由一对密钥组成&#xff1a;公钥和私钥。公钥存储在远程服务器上&#xff0c;…

软件工程复习

一、题型 单项选择题 20分 填空题 10分 判断题 10分 简答题 18分 应用题 12分 综合题 30分 软件程序数据文档 软件是无形的、不可见的逻辑实体 20世纪60年代末爆发软件危机 软件危机是指软件在开发与维护过程中遇到的一系列严重的问题 …

理解 GET、POST、PATCH 和 DELETE 请求的参数传递方式

理解 GET、POST、PATCH 和 DELETE 请求的参数传递方式 本文将向您介绍在使用 GET、POST、PATCH 和 DELETE 请求时如何传递参数。通过详细解释每种请求的参数传递方式和示例代码&#xff0c;您将了解如何正确地将数据发送到服务器并与之交互。 GET 请求的参数传递方式 在 GET…

CentOS 7.9安装宝塔面板,安装gitlab服务器

docker安装方式比较慢&#xff0c;安装包1.3GB 安装后启动很慢 docker logs q18qgztxdvozdv_gitlab-ce-gitlab-1 docker ps docker exec -it q18qgztxdvozdv_gitlab-ce-gitlab-1 sh cd /etc/gitlab cat initial_root_password 软件商店安装方式&#xff0c;失败了2023.12…

hook其他调试技巧

输出堆栈信息 通过 android.util.Log 输出当前线程的堆栈跟踪信息。 function showStacks() {Java.perform(function () {console.log(Java.use("android.util.Log").getStackTraceString(Java.use("java.lang.Throwable").$new() )); }) } 可以在需要的…

机器学习--稀疏学习

前置知识&#xff1a; 通常学习一次模型的过程如下&#xff1a;我们普遍为了获取更好的模型效果&#xff0c;直接对原始数据学习&#xff0c;会造成过拟合、需要特征提取&#xff1b; 而若特征提取完后依旧有很多特征&#xff0c;还是会容易过拟合。这时候就需要特征降维和特…

C/C++端口复用SO_REUSEADDR(setsockopt参数),test ok

端口复用最常用的用途应该是防止服务器重启时之前绑定的端口还未释放或者程序突然退出而系统没有释放端口。这种情况下如果设定了端口复用&#xff0c;则新启动的服务器进程可以直接绑定端口。如果没有设定端口复用&#xff0c;绑定会失败&#xff0c;提示ADDR已经在使用中——…

STM32 寄存器配置笔记——USART DMA发送

一、DMA介绍 直接存储器存取(DMA)用来提供在外设和存储器之间或者存储器和存储器之间的高速数据传 输。无须 CPU 干预&#xff0c;数据可以通过 DMA 快速地移动&#xff0c;这就节省了 CPU 的资源来做其他操作。当产品对于时序要求较严格时&#xff0c;外设使用DMA的方式能够减…

深入了解Java 8日期时间新玩法:DateTimeFormatter与ZoneOffset的使用

推荐语 在这篇文章中&#xff0c;我们将深入探讨Java中的DateTimeFormatter和ZoneOffset类的功能和使用方法。这些类是在Java 8中引入的新的日期时间API的一部分&#xff0c;它们为我们提供了更灵活、更易用的日期和时间处理能力。尽管这些类在Java 8中已经出现&#xff0c;但…

ELK(六)—Filebeat安装部署

目录 一、介绍1.1特点1.2使用原因1.3结构图1.4工作流程 二、安装部署2.1下载2.2启动2.3监控日志文件2.4自定义字段 三、连接Elasticsearch四、工作原理 一、介绍 Filebeat是一个轻量级的日志和文件数据收集器&#xff0c;属于Elastic Stack&#xff08;ELK Stack&#xff09;中…

近期Chrome浏览器 不知哪个版本升级后原先http强制跳转到https,导致服务端302强制跳转到http也没反应

关于Chrome更新http强制跳转到https解决方法 近期Chrome浏览器 不知哪个版本升级后原先http强制跳转到https&#xff0c;导致服务端302强制跳转到http也没反应一、F12检查加载的Response Headers中有没有Non-Authoritative-Reason二、找了资料后得到解决方案&#xff1a;三、找…

插入排序——直接插入排序和希尔排序(C语言实现)

文章目录 前言直接插入排序基本思想特性总结代码实现 希尔排序算法思想特性总结代码实现 前言 本博客插入排序动图和希尔排序视频参考大佬java技术爱好者&#xff0c;如有侵权&#xff0c;请联系删除。 直接插入排序 基本思想 直接插入排序是一种简单的插入排序法&#xff…