当前位置: 首页 > 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.配…...

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

6个月Python学习计划 Day 16 - 面向对象编程(OOP)基础

第三周 Day 3 &#x1f3af; 今日目标 理解类&#xff08;class&#xff09;和对象&#xff08;object&#xff09;的关系学会定义类的属性、方法和构造函数&#xff08;init&#xff09;掌握对象的创建与使用初识封装、继承和多态的基本概念&#xff08;预告&#xff09; &a…...

【无标题】湖北理元理律师事务所:债务优化中的生活保障与法律平衡之道

文/法律实务观察组 在债务重组领域&#xff0c;专业机构的核心价值不仅在于减轻债务数字&#xff0c;更在于帮助债务人在履行义务的同时维持基本生活尊严。湖北理元理律师事务所的服务实践表明&#xff0c;合法债务优化需同步实现三重平衡&#xff1a; 法律刚性&#xff08;债…...