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

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

AI-调查研究-01-正念冥想有用吗?对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...