elementUI中2个日期组件实现开始时间、结束时间(禁用日期面板、控制开始时间不能超过结束时间的时分秒)实现方案

没有使用selectableRange 禁用时分秒,是因为他会禁止每天的时分秒。 我们需要解决的是当开始时间、结束时间是同一天时, 开始时间不能超过结束时间。 如果直接清空,用户体验不好。所以用watch监听赋值,当前操作谁,它不满足条件,就改变它本身。

<el-col :span="8"><el-form-item label="开始时间" prop="startDate" :rules="globalRules.requiredBlurOrChange"><el-date-pickerv-model="formNew.startDate"type="datetime"format="yyyy-MM-dd HH:mm:ss"value-format="yyyy-MM-dd HH:mm:ss":picker-options="{...editStartOptions}"placeholder="选择日期"@change="changeDate"></el-date-picker></el-form-item></el-col><el-col :span="8"><el-form-item label="完成时间" prop="endDate" :rules="globalRules.requiredBlurOrChange"><el-date-pickerv-model="formNew.endDate"type="datetime"format="yyyy-MM-dd HH:mm:ss"value-format="yyyy-MM-dd HH:mm:ss":picker-options="{...editStopOptions}"placeholder="选择日期"@change="changeDate"></el-date-picker></el-form-item></el-col>data() {return {editStartOptions: {disabledDate: time => {if (!this.formNew.endDate) {return time.getTime() < new Date(1970 - 1 - 1).getTime();   //禁止选择1970年以前的日期} else {return time.getTime() > new Date(this.formNew.endDate);}},},editStopOptions: {disabledDate: time => {//开始时间可以和结束时间相同增加let startDate= new Date(this.formNew.startDate);startDate.setDate(startDate.getDate() - 1);return (time.getTime() < startDate || time.getTime() < new Date(1970 - 1 - 1).getTime()    //禁止选择1970年以前的日期);},},}
}watch: {'formNew.startDate': {handler(newVal) {if (newVal && this.formNew.endDate && new Date(newVal).getTime() > new Date(this.formNew.endDate).getTime()) {this.formNew.startDate = this.formNew.endDateconsole.log(newVal, 'newVal')}}},'formNew.endDate': {handler(newVal) {if (newVal && this.formNew.startDate && new Date(newVal).getTime() < new Date(this.formNew.startDate).getTime()) {// this.formNew.startDate = newVal;this.formNew.endDate = this.formNew.startDate}}},},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/60313.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在Django中安装、配置、使用CKEditor5,并将CKEditor5录入的文章展现出来,实现一个简单博客网站的功能

在Django中可以使用CKEditor4和CKEditor5两个版本&#xff0c;分别对应软件包django-ckeditor和django-ckeditor-5。原来使用的是CKEditor4&#xff0c;python manager.py makemigrations时总是提示CKEditor4有安全风险&#xff0c;建议升级到CKEditor5。故卸载了CKEditor4&…

实战项目:通过自我学习让AI学习五子棋 - 1 - 项目定义

项目介绍 五子棋是一种博弈游戏。在棋盘上黑子和白子交替落子&#xff0c;先于在任何方向上将至少五个棋子连在一起的一方获胜。在我们这个项目中我们尝试使用自学习的方法训练出一套走五子棋的算法。 这个项目本身并无特别大的实用价值。我们的目的在于&#xff1a; 尝试自…

从0开始搭建一个生产级SpringBoot2.0.X项目(十二)SpringBoot接口SpringSecurity JWT鉴权

前言 最近有个想法想整理一个内容比较完整springboot项目初始化Demo。 SpringBoot接口权限控制 SpringSecurity 接口使用 Bearer token类型 JWT 鉴权 一、pom文件新增依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>s…

JavaEE初阶---properties类+反射+注解

文章目录 1.配置文件properities2.快速上手3.常见方法3.1读取配置文件3.2获取k-v值3.3修改k-v值3.4unicode的说明 4.反射的引入4.1传统写法4.2反射的写法&#xff08;初识&#xff09;4.3反射的介绍4.4获得class类的方法4.5所有类型的class对象4.6类加载过程4.7类初始化的过程4…

【React】深入理解 JSX语法

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 深入理解 JSX语法1. JSX 简介2. JSX 的基本语法2.1 基本结构2.2 与普通 JavaScr…

Spark中给读取到的数据 的列 重命名的几种方式!

目录 一、第一种 (withColumnRenamed) 二、第二种&#xff08;toDF&#xff09; 三、第三种&#xff08; toDF(*tuple1) &#xff09; 四、 第四种(schema) 五、假如文件里自带有列名的情况&#xff08;option&#xff09; 一、第一种 (withColumnRenamed) 假设要把如下…

M1M2 MAC安装windows11 虚拟机的全过程

M1/M2 MAC安装windows11 虚拟机的全过程 这两天折腾了一下windows11 arm架构的虚拟机&#xff0c;将途中遇到的坑总结一下。 1、虚拟机软件&#xff1a;vmware fusion 13.6 或者 parallel 19 &#xff1f; 结论是&#xff1a;用parellel 19。 这两个软件都安装过&#xff0…

IEEE JSSC更新|Tiny Tapeout:让每个人都能设计定制芯片

简介 由于成本高昂且需要专业技术&#xff0c;设计和制造定制集成电路的传统上仅限于大型公司和机构。然而&#xff0c;名为Tiny Tapeout的创新项目正在改变这一现状&#xff0c;让业余爱好者、学生和小型团队也能设计定制芯片。本文将探讨Tiny Tapeout的工作原理&#xff0c;以…

Java:一段代码,无限可能

Java&#xff0c;诞生于1995年&#xff0c;如今已走过近三十载春秋。它历经互联网泡沫的兴衰、移动互联网的浪潮&#xff0c;以及云计算和大数据的洗礼&#xff0c;依然屹立在编程语言的舞台中央&#xff0c;散发着耀眼的光芒。这篇文章将带你回顾Java的辉煌历史&#xff0c;探…

《XGBoost算法的原理推导》12-14决策树复杂度的正则化项 公式解析

本文是将文章《XGBoost算法的原理推导》中的公式单独拿出来做一个详细的解析&#xff0c;便于初学者更好的理解。 我们定义一颗树的复杂度 Ω Ω Ω&#xff0c;它由两部分组成&#xff1a; 叶子结点的数量&#xff1b;叶子结点权重向量的 L 2 L2 L2范数&#xff1b; 公式(…

Linux【基础篇】

-- 原生罪 linux的入门安装学习 什么是操作系统&#xff1f; 用户通过操作系统和计算机硬件联系使用。桥梁~ 什么是Linux&#xff1f; 他是一套开放源代码&#xff08;在互联网上找到Linux系统的源代码&#xff0c;C语言写出的软件&#xff09;&#xff0c;可以自由 传播&…

大数据技术在智慧医疗中的应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 大数据技术在智慧医疗中的应用 大数据技术在智慧医疗中的应用 大数据技术在智慧医疗中的应用 引言 大数据技术概述 定义与原理 发…

Linux(CentOS)安装 MySQL

CentOS版本&#xff1a;CentOS 7 三种安装方式&#xff1a; 一、通过 yum 安装&#xff0c;最简单&#xff0c;一键安装&#xff0c;全程无忧。 二、通过 rpm 包安装&#xff0c;需具备基础概念及常规操作。 三、通过 gz 包安装&#xff0c;需具备配置相关操作。 --------…

CSS如何改变滚动条的颜色样式粗细?

默认滚动条很丑怎么办&#xff1f;如何改版滚动条的粗细&#xff0c;颜色&#xff0c;让它更美观&#xff1f;CSS如何改变滚动条的粗细&#xff1f; 干货来了 /* Webkit内核浏览器的滚动条样式 */ ::-webkit-scrollbar {width: 4px; /* 设置滚动条的宽度 */ }::-webkit-scroll…

YOLOv11(Ultralytics)可视化界面ui设计,基于pyqt5,单文件即插即用,支持文件夹检测及云摄像头检测并保存

本文的可视化界面对于YOLOv11/Ultralytics/YOLOv8的检测、分割、分类、姿势估算&#xff08;detection, segmentation, obb, classification, and pose estimation&#xff09;等均可正常显示。本次新增了图片及视频的保存&#xff0c;可以选择传入文件夹进行检测并显示&#x…

用python开发坦克大战重制版

Python 开发坦克大战重制版&#xff1a;全面教程 引言 坦克大战是一款经典的街机游戏&#xff0c;自1985年首次推出以来&#xff0c;便吸引了无数玩家。随着时间的推移&#xff0c;许多游戏开发者开始尝试重制这款经典游戏。本文将指导你如何使用 Python 和 Pygame 库开发一个…

链式结构二叉树

数据结构 结点申请 树&#x1f332;行结构 前中后序遍历 二叉树结点个数 二叉树叶子节点个数 第k层结点个数 二叉树深度 二叉树查找值为x的结点 二叉树销毁

【2024软考架构案例题】你知道什么是 RESTful 风格吗?

&#x1f449;博主介绍&#xff1a; 博主从事应用安全和大数据领域&#xff0c;有8年研发经验&#xff0c;5年面试官经验&#xff0c;Java技术专家&#xff0c;WEB架构师&#xff0c;阿里云专家博主&#xff0c;华为云云享专家&#xff0c;51CTO 专家博主 ⛪️ 个人社区&#x…

#渗透测试#SRC漏洞挖掘#深入挖掘CSRF漏洞02

免责声明 本教程仅为合法的教学目的而准备&#xff0c;严禁用于任何形式的违法犯罪活动及其他商业行为&#xff0c;在使用本教程前&#xff0c;您应确保该行为符合当地的法律法规&#xff0c;继续阅读即表示您需自行承担所有操作的后果&#xff0c;如有异议&#xff0c;请立即停…

自动驾驶革命:从特斯拉到百度,谁将主宰未来交通?

内容概要 自动驾驶技术正在经历一个前所未有的革命性变化&#xff0c;各大企业纷纷抢占这一充满潜力的新市场。以特斯拉和百度为代表的行业巨头&#xff0c;正利用各自的优势在这一技术的赛道上展开激烈竞争。特斯拉凭借其在电动汽车和自动驾驶领域的前瞻性设计与不断革新的技…