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…

摩尔线程嵌入式面试题及参考答案(2万字长文)

说一下你对 drm 框架的理解。 DRM(Direct Rendering Manager)是 Linux 系统中用于管理图形显示设备的一个重要框架。 从架构层面来讲,它处于内核空间,主要目的是为用户空间的图形应用程序提供一个统一的接口来访问图形硬件。DRM 包括内核态的驱动模块和用户态的库。内核态的…

CPU缓存的层次结构和它们如何影响性能

目录 L1缓存&#xff08;一级缓存&#xff09;L2缓存&#xff08;二级缓存&#xff09;L3缓存&#xff08;三级缓存&#xff09;应用层缓存-内存缓存应用层缓存-分布式缓存缓存层次结构的影响 CPU缓存是计算机处理器内部的快速存储区域&#xff0c;用于减少处理器访问主内存&am…

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) 假设要把如下…

imu_tk配置教程(锁死ubuntu18.04,不要22.04)

在ubuntu18.04上安装。 imu_tk 的 cmake 必须要qt4.x&#xff0c;但 ubuntu22.04 和qt4.x不适配。 1、安装 ceres-solver 下载路径&#xff1a;http://ceres-solver.org/installation.html &#xff08;需要梯子&#xff0c;核心内容记录如下。需下载 ceres-solver 安装包&am…

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

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

经济模型智慧管理分析系统(EcoModel Manager)

200例更新完成 1.产品介绍 产品介绍方案 产品名称&#xff1a; 经济模型智慧管理分析系统&#xff08;EcoModel Manager&#xff09; 主要功能&#xff1a; 多维度经济模型构建智能数据分析与预测动态情景模拟与优化可视化报告与决策支持 功能介绍&#xff1a; 多维度经济…

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; 公式(…

JavaScript 正则表达式详解

正则表达式(Regular Expression,简称 RegEx)是一种强大的文本匹配工具,广泛应用于字符串搜索、替换和验证等场景。 1. 基本概念 1.1 创建正则表达式 在 JavaScript 中,可以通过两种方式创建正则表达式: 字面量表示法: const regex = /pattern/flags; 构造函数表示法…

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;需具备配置相关操作。 --------…

无线局域网四种类型

无线局域网&#xff08;WLAN&#xff09;常用的四种类型包括&#xff1a; 基础设施模式&#xff08;Infrastructure Mode&#xff09; 在这种模式下&#xff0c;所有设备都通过无线接入点&#xff08;AP&#xff09;进行通信。接入点通常连接到有线网络&#xff0c;以便无线设备…

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

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