element-push el-date-picker日期时间选择器,禁用可选中的时间 精确到分钟

news/2025/3/4 13:35:55/

效果

 本来用的是时间段,但是甲方说不好用,让换成这样的 六百六十六

<el-form-item label="考评时间" class="is-required"><div style="display: flex; gap: 10px;"><el-form-item label="" style="display: inline-block; margin-bottom: 0px;" prop="EvaluationStartTime"><el-date-pickerv-model="form.EvaluationStartTime"type="datetime"placeholder="开始时间"prefix-icon="none"value-format="YYYY-MM-DD HH:mm"format="YYYY-MM-DD HH:mm"style="width: 190px;"@change="changeEvaluationStartTime"></el-date-picker></el-form-item>-<el-form-item label="" style="display: inline-block; margin-bottom: 0px;" prop="EvaluationEndTime"><el-date-picker:disabled="!form.EvaluationStartTime"v-model="form.EvaluationEndTime"type="datetime"placeholder="结束时间"prefix-icon="none"value-format="YYYY-MM-DD HH:mm"format="YYYY-MM-DD HH:mm"style="width: 190px;"@change="changeEvaluationEndTime" //如果直接选择日期有开始结束日期可能会相等:disabled-date="disabledEndDate":disabled-hours="disabledEndHours":disabled-minutes="disabledEndMinutes"></el-date-picker></el-form-item></div>
</el-form-item>
javascript">data:{return{form: {EvaluationStartTime: '',EvaluationEndTime: '',}}
},
methods: {// 当结束时间变化时的处理逻辑changeEvaluationEndTime() {const startTime = new Date(this.form.EvaluationStartTime).getTime();const endTime = new Date(this.form.EvaluationEndTime).getTime();// 如果结束时间小于或等于开始时间if (startTime >= endTime) {this.form.EvaluationEndTime = ""; // 清空结束时间ElMessage.warning('结束时间需要大于开始时间'); // 提示用户 这里我引入了ElMessage}},// 禁用结束日期disabledEndDate(date) {if (!this.form.EvaluationStartTime) {return true; // 如果开始时间为空,禁用所有日期}const startDate = new Date(this.form.EvaluationStartTime);return date.getTime() < startDate.setHours(0, 0, 0, 0); // 禁用早于开始日期的日期},// 禁用结束时间的小时disabledEndHours() {if (!this.form.EvaluationStartTime || !this.form.EvaluationEndTime) {return []; // 如果开始时间或结束时间为空,不禁用任何小时}const startDate = new Date(this.form.EvaluationStartTime);const endDate = new Date(this.form.EvaluationEndTime);// 如果结束日期与开始日期是同一天,则禁用早于开始时间的小时if (startDate.toDateString() === endDate.toDateString()) {const startHour = startDate.getHours();const disabledHours = [];for (let i = 0; i < startHour; i++) {disabledHours.push(i);}return disabledHours;}return []; // 如果不是同一天,不禁用任何小时},// 禁用结束时间的分钟disabledEndMinutes(selectedHour) {if (!this.form.EvaluationStartTime || !this.form.EvaluationEndTime) {return []; // 如果开始时间或结束时间为空,不禁用任何分钟}const startDate = new Date(this.form.EvaluationStartTime);const endDate = new Date(this.form.EvaluationEndTime);// 如果结束日期与开始日期是同一天,并且选中的小时与开始时间的小时相同,则禁用早于开始时间的分钟if (startDate.toDateString() === endDate.toDateString() && selectedHour === startDate.getHours()) {const startMinute = startDate.getMinutes();const disabledMinutes = [];for (let i = 0; i <= startMinute; i++) {disabledMinutes.push(i); // 禁用所有早于或等于开始分钟的分钟}return disabledMinutes;}return []; // 如果不是同一天或不同小时,不禁用任何分钟},
},

 

 

 

 


http://www.ppmy.cn/news/1576552.html

相关文章

刷题日记——部分二分算法题目分享

前言 咱们紧跟上一期结合时间复杂度浅谈二分法的好处, 并分享部分二分题目(将持续更新题目,绝对值你一个收藏)-CSDN博客 笔者接着分享一些刷过的关于二分算法的题目. 第一题 1283. 使结果不超过阈值的最小除数 - 力扣&#xff08;LeetCode&#xff09; 这道题就是典型的二…

探索区块链数据:使用Python实现区块链数据分析

探索区块链数据&#xff1a;使用Python实现区块链数据分析 在区块链和Web 3.0时代&#xff0c;数据分析变得尤为重要。区块链技术的去中心化和透明性为数据分析提供了丰富的资源和机会。作为区块链与Web 3.0、Python领域的著名自媒体创作者&#xff0c;笔名Echo_Wish&#xff…

解决redis lettuce连接池经常出现连接拒绝(Connection refused)问题

一.软件环境 windows10、11系统、springboot2.x、redis 6 7 linux&#xff08;centos&#xff09;系统没有出现这问题&#xff0c;如果你是linux系统碰到的&#xff0c;本文也有一定大参考价值。 根本思路就是&#xff1a;tcp/ip连接的保活(keepalive)。 二.问题描述 在spr…

react脚手架配置别名

1.在webpack.config.js中搜索关键字alias,新增别名。 2.tsconfig.json配置说明&#xff0c;主要是消除ts引入别名的报错。 新增配置

软考教材重点内容 信息安全工程师 第18章 网络安全测评技术与标准

18.1.1 网络安全测评概念 网络安全测评是指参照一定的标准规范要求&#xff0c;通过一系列的技术和管理方法&#xff0c;获取评估对象的网络安全状况信息&#xff0c;对其给出相应的网络安全情况综合判定。网络安全测评对象通常包括信息系统的组成要素或信息系统自身。 18.2 网…

ES from size聚合查询10000聚合查询,是每个分片先聚合,再统计。还是所有节点查询1万条后,再聚合

在 Elasticsearch 中&#xff0c;聚合查询 的执行过程是 分布式 的&#xff0c;Elasticsearch 会先在每个分片&#xff08;shard&#xff09;上执行本地聚合&#xff0c;然后再在协调节点&#xff08;coordinating node&#xff09;上对所有分片的聚合结果进行 全局汇总。具体过…

5G网络切片技术浅显易懂分析

5G网络是要面向多连接和多样化业务的&#xff0c;需要能够像积木一样灵活部署&#xff0c;方便地进行新业务快速上线/下线&#xff0c;满足人们日益增长的数据业务需求。即&#xff1a;要有分类管理&#xff0c;要能灵活部署&#xff0c;于是网络切片这一概念应运而生。 网络切…

jenkins集成docker发布java项目

1、创建pipeline流水线任务 2、进入配置选项 选择参数化构建 3、添加2个字符参数&#xff0c;用于传递变量 4、编写pipeline脚本 //所有脚本命令都放在pipeline中 pipeline{//指定任务再哪个集群节点中执行agent any//声明全局变量&#xff0c;方便后面使用environment {harbor…