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

el-date-picker 日期时间选择器 限时时间范围 精确到时分秒

官方的disabledDate属性:设置禁用状态,参数为当前日期,要求返回 Boolean,它只能禁用日期,对于时间并不能直接禁用,总结以下两个方法解决禁用时间:

1.通过watch去监听源数据:

1.1 组件

          <el-form-item label="任务时间" prop="time"><el-date-picker:disabledDate="disabledDate"style="width: 100%"v-model="form.time"type="datetimerange"value-format="yyyy-MM-dd HH:mm:ss"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker></el-form-item>

2.2 watch函数来监听数据变化

methods:{//只能禁用日期disabledDate (time) {// 禁止选择当前时间之前的日期return time.getTime() < Date.now() - 24 * 3600 * 1000;},
},
watch:{//禁用时间'form.time'(newVal) {// 如果开始时间是在当前时间之前,就重置时间if (newVal && newVal[0] && new Date(newVal[0]).getTime() < Date.now()) {this.$nextTick(() => {this.$message({type: 'error',message: '开始时间不能早于当前时间!'});this.form.time = ['', ''];});}// 如果结束时间是在当前时间之前,也重置时间if (newVal && newVal[1] && new Date(newVal[1]).getTime() < Date.now()) {this.$nextTick(() => {this.$message({type: 'error',message: '结束时间不能早于当前时间!'});this.form.time = ['', ''];});}},
}

2.通过el-form表单校验去给校验错误提示(体验会好些)

computed:{rules () {return {time: [{ required: true, message: '请输入任务时间', trigger: 'blur' },{validator: this.checkTimeRange,trigger: 'change'}],}}
},
methods:{checkTimeRange (rule, value, callback) {if (!value || !value[0] || !value[1]) {callback(new Error('请选择时间范围'));} else if (new Date(value[0]).getTime() < Date.now()) {callback(new Error('开始时间不能早于当前时间'));} else if (new Date(value[1]).getTime() < Date.now()) {callback(new Error('结束时间不能早于当前时间'));} else {callback();}},
}

相关文章:

el-date-picker 日期时间选择器 限时时间范围 精确到时分秒

官方的disabledDate属性&#xff1a;设置禁用状态&#xff0c;参数为当前日期&#xff0c;要求返回 Boolean&#xff0c;它只能禁用日期&#xff0c;对于时间并不能直接禁用&#xff0c;总结以下两个方法解决禁用时间&#xff1a; 1.通过watch去监听源数据&#xff1a; 1.1 组…...

轮廓线dp:GYM103446C

https://vjudge.net/contest/591700#problem/H 考虑轮廓线dp&#xff0c;当我们枚举到蓝色格子的时候&#xff0c;我们记录红色格子的状态 每个格子有4种状态 0有向下1需要向上2不用管3需向右 每次枚举的时候&#xff0c;我们需要考虑这个格子的三种状态&#xff1a; 10不放…...

羊驼免疫制备纳米抗体

纳米抗体&#xff08;nanobodies&#xff0c;Nbs&#xff09;是由比利时科学家Hamers等人在骆驼血液内首次发现的一种新型抗体&#xff0c;与传统抗体相比&#xff0c;这种抗体不存在轻链&#xff0c;只有重链抗体&#xff08;HcAb&#xff09;和两个常规的CH2和CH3区组成&…...

【AI好好玩02】利用Lama Cleaner本地实现AIGC试玩:擦除对象、替换对象、更换风格等等

目录 一、安装二、擦除功能1. LaMa模型实操实例一&#xff1a;去除路人实操实例二&#xff1a;去水印实操实例三&#xff1a;老照片修复 2. LDM模型3. ZITS模型4. MAT模型5. FcF模型6. Manga模型 三、替换对象功能1. sd1.52. sd23. anything44. realisticVision1.45. 四个模型的…...

SQL FULL OUTER JOIN 关键字(完整外部连接)||SQL自连接 Self JOIN

SQL FULL OUTER JOIN 关键字 当左&#xff08;表1&#xff09;或右&#xff08;表2&#xff09;表记录匹配时&#xff0c;FULL OUTER JOIN关键字将返回所有记录。 注意&#xff1a; FULL OUTER JOIN可能会返回非常大的结果集&#xff01; SQL FULL OUTER JOIN 语法 SELECT …...

专科医院污水处理设备构造解析及工艺流程

诸城市鑫淼环保小编带大家了解一下专科医院污水处理设备构造解析及工艺流程 主要组成部分&#xff1a; 1.预处理单元 处理流程的起点是预处理单元&#xff0c;用于去除废水中的大颗粒物质和固体废物。这一阶段通常包括隔栅和筛网&#xff0c;以确保进一步处理的污水清洁。 2.生…...

【RabbitMQ】RabbitMQ 消息的可靠性 —— 生产者和消费者消息的确认,消息的持久化以及消费失败的重试机制

文章目录 前言&#xff1a;消息的可靠性问题一、生产者消息的确认1.1 生产者确认机制1.2 实现生产者消息的确认1.3 验证生产者消息的确认 二、消息的持久化2.1 演示消息的丢失2.2 声明持久化的交换机和队列2.3 发送持久化的消息 三、消费者消息的确认3.1 配置消费者消息确认3.2…...

百万套行泊一体量产定点,中国市场「开启」智驾高低速集成

进入2023年&#xff0c;席卷中国市场的行泊一体概念方案进入定点、量产交付的第一波高峰期。这套方案&#xff0c;以高性价比、硬件复用、高低速智驾集成的模式&#xff0c;备受市场青睐。 本周&#xff0c;纵目科技宣布&#xff0c;Amphiman3000行泊一体产品获得长安汽车旗下…...

Gopro hero5运动相机格式化后恢复案例

Gopro运动相机以稳定著称&#xff0c;旗下的Hero系列销售全球。下面我们来看一个Hero5格式化后拍了少量素材的恢复案例。 故障存储:64G MicroSD卡 Exfat文件系统 故障现象: 64G的卡没备份数据时做了格式化操作又拍了一条&#xff0c;发现数据没有备份&#xff0c;客户自行使…...

Microsoft Dynamics 365 CE 扩展定制 - 6. 增强代码

在本章中,我们将介绍以下内容: 使用三层模式重构插件用QueryExpressions替换LINQ数据访问层记录自定义项中的错误将插件转换为自定义工作流活动单元测试插件业务逻辑使用内存上下文对插件进行单元测试端到端集成测试插件分析插件构建通用读取审核插件利用CRM Online实现跨来源…...

基于libopenh264 codec的svc分层流实现方案

OpenH264 http://www.openh264.org/ 是标准的H.264 encoder/decoder. ffmpeg已经集成libopenh264&#xff0c;但不支持svc特性。 openh264 encoder支持svc特性&#xff1a; 1. 时域4层&#xff1a;Temporal scalability up to 4 layers in a dyadic hierarchy 2. 空域4层&#…...

为机器学习算法准备数据(Machine Learning 研习之八)

本文还是同样建立在前两篇的基础之上的&#xff01; 属性组合实验 希望前面的部分能让您了解探索数据并获得洞察力的几种方法。您发现了一些数据怪癖&#xff0c;您可能希望在将数据提供给机器学习算法之前对其进行清理&#xff0c;并且发现了属性之间有趣的相关性&#xff0c…...

基于Python OpenCV的金铲铲自动进游戏、D牌...

基于Python OpenCV的金铲铲自动进游戏、D牌... 1. 自动点击进入游戏1.1 环境准备1.2 功能实现2. 自动D牌3. 游戏结束自动退1. 自动点击进入游戏 PS: 本测试只用于交流学习OpenCV的相关知识,不能用于商业用途,后果自负。 1.1 环境准备 需要金铲铲在win10的模拟器,我们这里选…...

c++中httplib使用

httplib文件链接:百度网盘 请输入提取码 提取码:kgnq json解析库:百度网盘 请输入提取码 提取码:oug0 一、获取token 打开postman, 在body这个参数中点击raw,输入用户名和密码 然后需要获取到域名和地址。 c++代码如下: #include "httplib.h" #in…...

Vite 的基本原理,和 webpack 在开发阶段的比较

目录 1&#xff0c;webpack 的流程2&#xff0c;Vite 的流程简单编译 3&#xff0c;总结 主要对比开发阶段。 1&#xff0c;webpack 的流程 开发阶段大致流程&#xff1a;指定一个入口文件&#xff0c;对相关的模块&#xff08;js css img 等&#xff09;先进行打包&#xff0…...

[开源]免费开源MES系统/可视化数字大屏/自动排班系统

开源系统概述&#xff1a; 万界星空科技免费MES、开源MES、商业开源MES、市面上最好的开源MES、MES源代码、免费MES、免费智能制造系统、免费排产系统、免费排班系统、免费质检系统、免费生产计划系统。 万界星空开源MES制造执行系统的Java开源版本。开源mes系统包括系统管理…...

python如何使用gspread读取google在线excel数据?

一、背景 公司使用google在线excel管理测试用例&#xff0c;为了方便把手工测试用到的测试数据用来做自动化用例测试数据&#xff0c;所以就想使用python读取在线excel数据&#xff0c;通过数据驱动方式&#xff0c;完成自动化回归测试&#xff0c;提升手动复制&#xff0c;粘…...

线程同步——互斥量解锁、解锁

类似与进程间通信信号量的加锁解锁。 对互斥量进行加锁后&#xff0c;任何其他试图在此对互斥量加锁的线程都会被阻塞&#xff0c;直到当前线程释放该互斥锁。如果释放互斥锁时有多个线程被阻塞&#xff0c;所有在该互斥锁上的阻塞线程都会变成可运行状态&#xff0c;第一个变…...

数据结构(c语言版) 顺序表

代码 #include <stdio.h> #include <stdlib.h>typedef int E; //这里我们的元素类型就用int为例吧&#xff0c;先起个别名//定义结构体 struct List{E * array;int capacity; //数组的容量int size; };//给结构体指针起别名 typedef struct List * ArrayLis…...

Springboot 集成 RocketMq(入门)

1.RocketMq安装部署 Linux 安装 RocketMq-CSDN博客 2.添加依赖包 <dependency><groupId>org.apache.rocketmq</groupId><artifactId>rocketmq-spring-boot-starter</artifactId><version>2.2.3</version> </dependency> 3.配…...

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

《Playwright:微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)

【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

【Go语言基础【12】】指针:声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...