element-plus使用el-date-picker组件时,如何禁止用户选择当前时间之后的日时分秒
element-plus使用el-date-picker组件时,如何禁止用户选择当前时间之后的日时分秒
例:
当前时间为2023-11-15 14.24,不能选择这之后的时分秒。(禁止用户选择2023-11-15 14.28)

<el-date-pickerv-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"/>
/* 限制天 */
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) continuearrs.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) continuearrs.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) continuearrs.push(i)}}return arrs
}
相关文章:
element-plus使用el-date-picker组件时,如何禁止用户选择当前时间之后的日时分秒
element-plus使用el-date-picker组件时,如何禁止用户选择当前时间之后的日时分秒 例: 当前时间为2023-11-15 14.24,不能选择这之后的时分秒。(禁止用户选择2023-11-15 14.28) <el-date-pickerv-model"form.s…...
keepalived安装配置(服务器主备、负载均衡)
系统拓扑 安装keepalived 主备服务器上都需要安装 在线安装 yum install -y keepalived 离线安装 # todo 服务器准备 虚拟机ip:192.168.11.56 主服务器:192.168.11.53 备服务器:192.168.11.54 配置文件修改 keepalived安装之后&…...
盘点一款制作电子杂志的网站,小白也能快速上手
电子杂志作为一种时尚、环保、便捷的宣传形式,越来越受到各行各业的青睐。无论是企业宣传、产品推广,还是个人分享,电子杂志都能展现出独特的魅力。而制作电子杂志,不再是专业人士的专属,现在小白也能快速上手&#…...
全域全自主建设,亚信科技AntDB数据库助力广电5G业务上线运行
自2019年6月,中国广电成功获得5G牌照以来,迅速推进网络建设目标,成为5G网络覆盖广、应用场景多、用户体验出色的第四大运营商。其依托全球独有的700MHz频谱资源,具备覆盖能力强、容量足、速率高的优势。通过不断深化和中国移动的共…...
使用 SSH 密钥进行身份验证
使用 SSH 密钥进行身份验证可以提高安全性,并免去每次登录时输入密码的麻烦。以下是使用 SSH 密钥进行身份验证的步骤: 生成密钥对:在本地计算机上生成 SSH 密钥对。打开终端并执行以下命令: ssh-keygen -t rsa -b 4096这将生成…...
国内最受欢迎的电商API接口调用京东商品详情数据
国内实用的API接口 国内最受欢迎的7大API供应平台对比和介绍 本文将介绍7款API供应平台:电商API数据、百度e、Apix、数说聚合、通联数据、HaoService、datasift 。排名不分先后! 免费实用的API接口 第一部分 1、电商数据(API数据接口_开发者…...
windows远程桌面登录ubuntu,黑屏闪退,
首先需要安装xrdp以后才能远程登录,安装命令 sudo apt-get install xrdp 这里需要注意一个问题,如果在ubuntu 本地登录的情况下,windows远程登录会出现黑屏甚至闪退的问题。原因是本地登录和远程登陆是互斥的,本地登录了就不能远…...
12-使用vue2实现todolist待办事项
个人名片: 😊作者简介:一名大二在校生 🤡 个人主页:坠入暮云间x 🐼座右铭:懒惰受到的惩罚不仅仅是自己的失败,还有别人的成功。 🎅**学习目标: 坚持每一次的学习打卡 文章…...
微信小程序授权登录?
wxml <!-- 示例:在wxml中创建一个授权登录按钮 --> <button bindtap"getUserInfo">授权登录</button> js // 用户点击授权登录按钮时触发的事件处理函数getUserInfo: function (e) {wx.getUserProfile({desc: 用于完善会员资料, // 授…...
React 18 + Hooks +Ts 开发中遇到的问题及解决方案!
这篇文章是用来专门记录关于React 18 Hooks Ts 开发中遇到的问题及解决方案 Q1 问题描述: TS7016: Could not find a declaration file for module js-export-excel. /Users/zhangliangliang/WebstormProjects/daizhang-system-front/node_modules/js-export-exc…...
推荐一个非常好用的uniapp的组件库【TMUI3.0】
文章目录 前言官网地址如何使用?注意事项后言 前言 hello world欢迎来到前端的新世界 😜当前文章系列专栏:前端系列文章 🐱👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果…...
LeetCode(19)最后一个单词的长度【数组/字符串】【简单】
目录 1.题目2.答案3.提交结果截图 链接: 58. 最后一个单词的长度 1.题目 给你一个字符串 s,由若干单词组成,单词前后用一些空格字符隔开。返回字符串中 最后一个 单词的长度。 单词 是指仅由字母组成、不包含任何空格字符的最大子字符串。 …...
使用Docker本地安装部署Drawio绘图工具并实现公网访问
目录 前言 1. 使用Docker本地部署Drawio 2. 安装cpolar内网穿透工具 3. 配置Draw.io公网访问地址 4. 公网远程访问Draw.io 前言 提到流程图,大家第一时间可能会想到Visio,不可否认,VIsio确实是功能强大,但是软件为收费&…...
IDEA导入jar包
通过maven导入本地包 mvn install:install-file -DfileD:\WebProject\ERP\zhixing-heyue-erp-server\zxhy-service-api\src\main\java\com\zxhy\service\api\invoice\baiwang\lib\com_baiwang_bop_sdk_outer_3_4_393.jar -DgroupIdcom.baiwang -DartifactIdbaiwang.open -Dver…...
使用flutter的Scaffold脚手架开发一个最简单的带tabbar的app模板
flutter自带的scaffold脚手架可以说还是挺好用的,集成了appBar,还有左侧抽屉,还有底部tabbar,可以说拿来就可以用了啊,所以我今天也体验了一下,做了一个最简单的demo,就当是学习记录了。 效果展…...
aws服务器配置密码登陆
在 AWS 上,EC2 实例默认使用密钥对进行身份验证,而不是密码登录。不过,你可以通过以下步骤在 EC2 实例上启用密码登录: 登录 AWS 管理控制台并导航到 EC2 服务。 选择要配置密码登录的目标 EC2 实例。 在底部的 “描述” 标签页…...
【命令行魔法:掌握Linux基础工具开发的独门技艺】
本节目标 1.Linux 软件包管理器 2.Linux开发工具 3.Linux编译器-gcc/g使用 4.Linux项目自动化构建工具-make/Makefile 5.Linux第一个小程序-进度条 1.Linux 软件包管理器 yum 什么是软件包 在Linux下安装软件, 一个通常的办法是下载到程序的源代码, 并进行编译…...
虚拟DOM的原理和理解
Virtual DOM前言 在传统的Web开发中,直接操作真实的DOM通常是一个昂贵且低效的操作。为了解决这个问题,Virtual DOM(虚拟DOM)被引入为一个中间层,允许开发者在内存中进行操作,从而避免频繁且不必要的真实DO…...
C# WPF Threads 和 Dispatchers 有什么区别
在C# WPF(Windows Presentation Foundation)中,Threads(线程)和Dispatchers(调度器)之间的关系非常重要,因为WPF是一个基于STA(单线程单元)的UI框架。 Threa…...
【文末送书——数学经典著作】工科必备的数学思维培养
欢迎关注博主 Mindtechnist 或加入【智能科技社区】一起学习和分享Linux、C、C、Python、Matlab,机器人运动控制、多机器人协作,智能优化算法,滤波估计、多传感器信息融合,机器学习,人工智能等相关领域的知识和技术。关…...
Ostrakon-VL-8B LaTeX文档自动化:将手写公式草图转换为排版代码
Ostrakon-VL-8B LaTeX文档自动化:将手写公式草图转换为排版代码 每次写论文或者报告,最头疼的部分是什么?对我而言,绝对是敲那些复杂的LaTeX公式。一个积分符号、一个分式结构,往往要花上好几分钟去回忆语法、调整括号…...
nRF52与RFX2401C的PA+LNA优化方案:基于SoftDevice的高效驱动实现
1. 为什么需要PA和LNA优化方案 如果你正在用nRF52开发BLE设备,可能会遇到这样的困扰:明明参数配置没问题,但通信距离就是达不到预期。这时候就该请出我们今天的主角——RFX2401C这颗PA/LNA芯片了。我去年做智能牧场项⽬时就踩过这个坑&#…...
保姆级教程:将你的YOLOv8模型用Gradio部署到公网,并设置密码保护(避免临时链接失效)
从原型到生产:YOLOv8模型的安全部署与Gradio高级应用指南 当你的YOLOv8模型在本地运行良好,接下来最自然的想法就是把它分享给团队成员、客户或者进行小范围演示。Gradio提供的shareTrue参数看似简单,但背后隐藏着许多值得深入探讨的技术细节…...
LangChain 1.0 中间件实战:5个钩子函数让你的Agent像专业工程师一样思考
LangChain 1.0中间件深度实践:5个钩子函数打造工程级Agent思维 当我们在2023年首次接触LangChain时,它还是一个以Chain为核心的实验性框架。如今,LangChain 1.0的发布标志着AI Agent开发正式进入生产就绪阶段。本文将带您深入探索其最具革命性…...
OpenCode应用案例:搭建企业内部代码审查助手,提升开发效率
OpenCode应用案例:搭建企业内部代码审查助手,提升开发效率 1. 项目背景与痛点分析 在软件开发团队中,代码审查是保证代码质量的关键环节。然而传统人工审查方式面临诸多挑战: 时间成本高:资深工程师需要花费大量时间…...
保姆级教程:用OpenAI Whisper给视频自动生成字幕(附Python代码)
视频创作者必备:用Whisper打造高效字幕工作流 每次剪辑视频最头疼的就是加字幕?作为过来人,我完全理解那种对着时间轴逐帧调整的痛苦。直到发现Whisper这个神器,我的工作效率直接翻了三倍。今天就把这套全自动字幕生成方案完整分享…...
西门子PLC存储区全解析:从M区到DB块的实战避坑指南
西门子PLC存储区全解析:从M区到DB块的实战避坑指南 第一次接触西门子PLC编程时,面对M区、L区和DB块这些存储区概念,我完全摸不着头脑。记得有次调试设备,明明在线监控看到M0.0已经置位,但程序就是不执行相应动作&#…...
半导体制造中的ProcessJob与Control Job:从定义到实战避坑指南
半导体制造中的ProcessJob与Control Job:从定义到实战避坑指南 在半导体制造的高精度世界里,每一片晶圆的流转都像一场精密编排的交响乐。而ProcessJob(PJ)和Control Job(CJ)就是这场演奏中不可或缺的指挥…...
QODER
...
Swiper动画进阶:手把手教你用Swiper Animate制作节日主题动画(2023最新版)
Swiper动画进阶:手把手教你用Swiper Animate制作节日主题动画(2023最新版) 当节日氛围遇上交互设计,如何让静态页面"活"起来?Swiper Animate作为Swiper生态中的动画引擎,能通过简单的类名配置实现…...
