当前位置: 首页 > news >正文

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组件时&#xff0c;如何禁止用户选择当前时间之后的日时分秒 例&#xff1a; 当前时间为2023-11-15 14.24&#xff0c;不能选择这之后的时分秒。&#xff08;禁止用户选择2023-11-15 14.28&#xff09; <el-date-pickerv-model"form.s…...

keepalived安装配置(服务器主备、负载均衡)

系统拓扑 安装keepalived 主备服务器上都需要安装 在线安装 yum install -y keepalived 离线安装 # todo 服务器准备 虚拟机ip&#xff1a;192.168.11.56 主服务器&#xff1a;192.168.11.53 备服务器&#xff1a;192.168.11.54 配置文件修改 keepalived安装之后&…...

盘点一款制作电子杂志的网站,小白也能快速上手

​电子杂志作为一种时尚、环保、便捷的宣传形式&#xff0c;越来越受到各行各业的青睐。无论是企业宣传、产品推广&#xff0c;还是个人分享&#xff0c;电子杂志都能展现出独特的魅力。而制作电子杂志&#xff0c;不再是专业人士的专属&#xff0c;现在小白也能快速上手&#…...

全域全自主建设,亚信科技AntDB数据库助力广电5G业务上线运行

自2019年6月&#xff0c;中国广电成功获得5G牌照以来&#xff0c;迅速推进网络建设目标&#xff0c;成为5G网络覆盖广、应用场景多、用户体验出色的第四大运营商。其依托全球独有的700MHz频谱资源&#xff0c;具备覆盖能力强、容量足、速率高的优势。通过不断深化和中国移动的共…...

使用 SSH 密钥进行身份验证

使用 SSH 密钥进行身份验证可以提高安全性&#xff0c;并免去每次登录时输入密码的麻烦。以下是使用 SSH 密钥进行身份验证的步骤&#xff1a; 生成密钥对&#xff1a;在本地计算机上生成 SSH 密钥对。打开终端并执行以下命令&#xff1a; ssh-keygen -t rsa -b 4096这将生成…...

国内最受欢迎的电商API接口调用京东商品详情数据

国内实用的API接口 国内最受欢迎的7大API供应平台对比和介绍 本文将介绍7款API供应平台&#xff1a;电商API数据、百度e、Apix、数说聚合、通联数据、HaoService、datasift 。排名不分先后&#xff01; 免费实用的API接口 第一部分 1、电商数据&#xff08;API数据接口_开发者…...

windows远程桌面登录ubuntu,黑屏闪退,

首先需要安装xrdp以后才能远程登录&#xff0c;安装命令 sudo apt-get install xrdp 这里需要注意一个问题&#xff0c;如果在ubuntu 本地登录的情况下&#xff0c;windows远程登录会出现黑屏甚至闪退的问题。原因是本地登录和远程登陆是互斥的&#xff0c;本地登录了就不能远…...

12-使用vue2实现todolist待办事项

个人名片&#xff1a; &#x1f60a;作者简介&#xff1a;一名大二在校生 &#x1f921; 个人主页&#xff1a;坠入暮云间x &#x1f43c;座右铭&#xff1a;懒惰受到的惩罚不仅仅是自己的失败&#xff0c;还有别人的成功。 &#x1f385;**学习目标: 坚持每一次的学习打卡 文章…...

微信小程序授权登录?

wxml <!-- 示例&#xff1a;在wxml中创建一个授权登录按钮 --> <button bindtap"getUserInfo">授权登录</button> js // 用户点击授权登录按钮时触发的事件处理函数getUserInfo: function (e) {wx.getUserProfile({desc: 用于完善会员资料, // 授…...

React 18 + Hooks +Ts 开发中遇到的问题及解决方案!

这篇文章是用来专门记录关于React 18 Hooks Ts 开发中遇到的问题及解决方案 Q1 问题描述&#xff1a; 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】

文章目录 前言官网地址如何使用&#xff1f;注意事项后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;前端系列文章 &#x1f431;‍&#x1f453;博主在前端领域还有很多知识和技术需要掌握&#xff0c;正在不断努力填补技术短板。(如果…...

LeetCode(19)最后一个单词的长度【数组/字符串】【简单】

目录 1.题目2.答案3.提交结果截图 链接&#xff1a; 58. 最后一个单词的长度 1.题目 给你一个字符串 s&#xff0c;由若干单词组成&#xff0c;单词前后用一些空格字符隔开。返回字符串中 最后一个 单词的长度。 单词 是指仅由字母组成、不包含任何空格字符的最大子字符串。 …...

使用Docker本地安装部署Drawio绘图工具并实现公网访问

目录 前言 1. 使用Docker本地部署Drawio 2. 安装cpolar内网穿透工具 3. 配置Draw.io公网访问地址 4. 公网远程访问Draw.io 前言 提到流程图&#xff0c;大家第一时间可能会想到Visio&#xff0c;不可否认&#xff0c;VIsio确实是功能强大&#xff0c;但是软件为收费&…...

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脚手架可以说还是挺好用的&#xff0c;集成了appBar&#xff0c;还有左侧抽屉&#xff0c;还有底部tabbar&#xff0c;可以说拿来就可以用了啊&#xff0c;所以我今天也体验了一下&#xff0c;做了一个最简单的demo&#xff0c;就当是学习记录了。 效果展…...

aws服务器配置密码登陆

在 AWS 上&#xff0c;EC2 实例默认使用密钥对进行身份验证&#xff0c;而不是密码登录。不过&#xff0c;你可以通过以下步骤在 EC2 实例上启用密码登录&#xff1a; 登录 AWS 管理控制台并导航到 EC2 服务。 选择要配置密码登录的目标 EC2 实例。 在底部的 “描述” 标签页…...

【命令行魔法:掌握Linux基础工具开发的独门技艺】

本节目标 1.Linux 软件包管理器 2.Linux开发工具 3.Linux编译器-gcc/g使用 4.Linux项目自动化构建工具-make/Makefile 5.Linux第一个小程序&#xff0d;进度条 1.Linux 软件包管理器 yum 什么是软件包 在Linux下安装软件, 一个通常的办法是下载到程序的源代码, 并进行编译…...

虚拟DOM的原理和理解

Virtual DOM前言 在传统的Web开发中&#xff0c;直接操作真实的DOM通常是一个昂贵且低效的操作。为了解决这个问题&#xff0c;Virtual DOM&#xff08;虚拟DOM&#xff09;被引入为一个中间层&#xff0c;允许开发者在内存中进行操作&#xff0c;从而避免频繁且不必要的真实DO…...

C# WPF Threads 和 Dispatchers 有什么区别

在C# WPF&#xff08;Windows Presentation Foundation&#xff09;中&#xff0c;Threads&#xff08;线程&#xff09;和Dispatchers&#xff08;调度器&#xff09;之间的关系非常重要&#xff0c;因为WPF是一个基于STA&#xff08;单线程单元&#xff09;的UI框架。 Threa…...

【文末送书——数学经典著作】工科必备的数学思维培养

欢迎关注博主 Mindtechnist 或加入【智能科技社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和技术。关…...

Claude Agent SDK 从 0 到 1 快速上手教程

Claude Agent SDK 从 0 到 1 快速上手教程 什么是 Claude Agent SDK? Claude Agent SDK 是 Anthropic 官方推出的用于构建 AI 智能体的开发工具包。它基于 Claude Code 构建,让开发者能够以编程方式创建、扩展和定制由 Claude 驱动的应用程序。与简单的聊天机器人不同,基于…...

自动加字幕软件推荐:口播视频如何批量加字幕过

口播视频加字幕&#xff0c;为什么越做越累&#xff1f;一位知识类博主连续两周日更3条口播视频&#xff0c;每条12–18分钟&#xff0c;需手动校对字幕、拆分金句切片、补气口停顿、匹配背景音乐——最后一条视频发布时&#xff0c;字幕错漏率达17%&#xff0c;平台审核未过。…...

CANN runtime:昇腾NPU 运行时的职责边界

个人主页&#xff1a;ujainu 文章目录前言为什么需要运行时这一层runtime管什么&#xff0c;不管什么Stream&#xff1a;并行的基本调度单位Event&#xff1a;跨Stream的同步锚点内存池化&#xff1a;少一次malloc就少一次卡顿任务队列&#xff1a;从计算图到硬件指令的最后一跳…...

AI算法工程师必学的Python库:这10个库,AI开发必备

对于软件测试从业者来说&#xff0c;随着人工智能技术在测试领域的渗透越来越深——从自动化测试用例生成到缺陷智能预测&#xff0c;从测试结果分析到测试环境智能化调度&#xff0c;掌握AI开发的核心工具链已经成为从功能测试向AI测试开发、智能化测试转型的核心竞争力。Pyth…...

安卓用户如何免费获取大模型API密钥并开始调用

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 安卓用户如何免费获取大模型API密钥并开始调用 对于安卓开发者或移动端技术爱好者而言&#xff0c;直接体验和调用多种大模型的能力…...

UE5 UMG界面开发避坑指南:WidgetComponent的ZOrder和图层管理到底怎么用?

UE5 UMG界面开发避坑指南&#xff1a;WidgetComponent的ZOrder和图层管理实战解析在虚幻引擎5的UMG界面开发中&#xff0c;WidgetComponent的渲染层级管理是一个看似简单却暗藏玄机的技术点。许多开发者在处理复杂UI系统时&#xff0c;常常会遇到控件遮挡混乱、图层顺序失控的问…...

网盘限速困扰?3步实现全平台文件下载效率革命性提升

网盘限速困扰&#xff1f;3步实现全平台文件下载效率革命性提升 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 &#xff0c;支持 百度网盘 / 阿里云盘 / 中国移动云盘 / 天翼云…...

TuxGuitar完整指南:免费开源吉他谱编辑器的终极教程 [特殊字符]

TuxGuitar完整指南&#xff1a;免费开源吉他谱编辑器的终极教程 &#x1f3b8; 【免费下载链接】tuxguitar Open source guitar tablature editor 项目地址: https://gitcode.com/gh_mirrors/tu/tuxguitar TuxGuitar是一款功能强大的开源吉他谱编辑器&#xff0c;支持多…...

Wand-Enhancer终极指南:三步免费解锁WeMod专业版所有功能

Wand-Enhancer终极指南&#xff1a;三步免费解锁WeMod专业版所有功能 【免费下载链接】Wand-Enhancer Advanced UX and interoperability extension for Wand (WeMod) app 项目地址: https://gitcode.com/gh_mirrors/we/Wand-Enhancer 还在为WeMod免费版的限制而烦恼吗&…...

18分钟攻陷GitHub!Nx Console投毒事件深度复盘:3800个核心仓库泄露的供应链安全警示

摘要&#xff1a;2026年5月20日&#xff0c;全球最大代码托管平台GitHub遭遇史上最严重的供应链攻击之一。黑客组织TeamPCP通过投毒VS Code扩展市场中的Nx Console v18.95.0版本&#xff0c;仅用18分钟、28次下载就成功渗透GitHub内部网络&#xff0c;窃取了包括Copilot、CodeQ…...