当前位置: 首页 > news >正文

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}}},},

相关文章:

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

没有使用selectableRange 禁用时分秒&#xff0c;是因为他会禁止每天的时分秒。 我们需要解决的是当开始时间、结束时间是同一天时&#xff0c; 开始时间不能超过结束时间。 如果直接清空&#xff0c;用户体验不好。所以用watch监听赋值&#xff0c;当前操作谁&#xff0c;它不…...

Oracle 聚集因子factor clustering

文章目录 聚集因子(Factor clustering)举例说明查询聚集因子聚集因子的优化结论 最近发现突然忘记聚集因子的原理了&#xff0c;故整理记录一下 聚集因子(Factor clustering) 在Oracle中&#xff0c;聚集因子&#xff08;Clustering Factor&#xff09;用于衡量数据在表中存储…...

【大数据学习 | kafka高级部分】kafka的快速读写

1. 追加写 根据以上的部分我们发现存储的方式比较有规划是对于后续查询非常便捷的&#xff0c;但是这样存储是不是会更加消耗存储性能呢&#xff1f; 其实kafka的数据存储是追加形式的&#xff0c;也就是数据在存储到文件中的时候是以追加方式拼接到文件末尾的&#xff0c;这…...

云技术基础

学习视频笔记均来自B站UP主" 泷羽sec",如涉及侵权马上删除文章 笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负 https://space.bilibili.com/350329294* 为什么要学云技术&#xff1f; 无论是防御还是…...

字节序(Byte Order)

这里写自定义目录标题 有两种主要的字节序&#xff1a;字节序与平台字节序转换 字节序&#xff08;Byte Order&#xff09;是指数据在内存中存储时字节的排列顺序。由于不同的计算机体系结构可能采用不同的字节序&#xff0c;因此理解字节序非常重要&#xff0c;特别是在处理多…...

融云:社交泛娱乐出海机会尚存,跨境电商异军突起

近年来&#xff0c;直播、语聊房、游戏社区&#xff0c;这些中国网友熟悉的网络社交形式&#xff0c;正在海外市场爆发出新的生命力。无论是被炒到几百人民币一个的 Clubhouse 邀请码&#xff0c;还是先后登顶中东下载榜的 Yalla、JACO&#xff0c;这些快速掀起体验浪潮的社交娱…...

django博客项目实现站内搜索功能

Django博客站内搜索功能实现 1. 准备工作 确保Django项目已经创建好&#xff0c;并且有一个用于存储博客文章的模型&#xff08;例如Post&#xff09;。 2. 定义搜索表单 在应用目录下创建一个forms.py文件&#xff0c;定义一个搜索表单。 from django import formsclass …...

蓝桥杯c++算法学习【1】之枚举与模拟(卡片、回文日期、赢球票、既约分数:::非常典型的比刷例题!!!)

别忘了请点个赞收藏关注支持一下博主喵&#xff01;&#xff01;&#xff01; 关注博主&#xff0c;更多蓝桥杯nice题目静待更新:) 枚举与模拟 一、卡片&#xff1a; 【问题描述】 小蓝有很多数字卡片&#xff0c;每张卡片上都是一个数字&#xff08;0到9&#xff09;。 小蓝…...

Android 延时操作的常用方法

一、简介 在Android开发中我们可能会有延时执行某个操作的需求&#xff0c;例如我们启动应用的时候&#xff0c;一开始呈现的是引导页面&#xff0c;3秒后进入主界面&#xff0c;这就是一个延时操作。还有一种是执行某些接口任务时&#xff0c;需要有超时机制。下面介绍常用的…...

AI驱动的轻量级笔记应用Blinko

什么是 Blinko &#xff1f; Blinko 是一个创新的开源项目&#xff0c;专为想要快速捕捉和整理瞬间想法的个人而设计。Blinko 允许用户在灵感迸发的瞬间无缝记录想法&#xff0c;确保不会错过任何创意火花。 Blinko 的设计初衷是让笔记记录变得更简单&#xff0c;让用户专注于内…...

一文搞懂 UML 类图

面向对象设计 主要就是使用UML的类图&#xff0c;类图用于描述系统中所包含的类以及它们之间的相互关系&#xff0c;帮助人们简化对系统的理解&#xff0c;它是系统分析和设计阶段的重要产物&#xff0c;也是系统编码和测试的重要模型依据 一、UML类图简介 统一建模语言 UML …...

Zabbix 7 最新版本安装 Rocky Linux 8

前言 本实验主要在Rocky Linux 中安装Zabbix&#xff0c;其他centos8、Debian、Ubuntu、Alma Linux都可以安装&#xff0c;就是在中间件有点不同。Nginx就要配置一下&#xff0c;官网给的教程也算是很规范的&#xff0c;就是在MySQL上要自己安装&#xff0c;他没有告诉我们&am…...

使用HTML、CSS和JavaScript创建动态雪人和雪花效果

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 ✨特色专栏&#xff1a…...

redis bind 127.0.0.1和bind 10.34.56.78的区别

绑定到 127.0.0.1&#xff0c;默认情况下&#xff0c;Redis 只会接受来自本地主机的连接。其他地址的则无法成功连接。如果绑定到主机的IP地址&#xff0c;则是可以被其他主机连接的。 可以通过iptables规则&#xff0c;进一步限制对redis的访问。 1、允许本地回环接口链接 …...

基于点云的 3D 目标检测模型 PointPillars 部署 tensorRT

PointPillars 3D 目标检测模型部署 tensorRT 一直想折腾一下基于点云的目标检测模型&#xff0c;但由于没有实际项目或工作需要&#xff0c;搞也搞的不够深入&#xff0c;把开源的模型跑一下似乎好像做过又好像没有做过。内心一直想搞一下&#xff0c;选定了 PointPillars 这个…...

centos查看硬盘资源使用情况命令大全

在 CentOS 系统中&#xff0c;你可以使用几个命令来查看硬盘的资源和使用情况。以下是一些常用的命令&#xff1a; 1. df 命令 df (disk free) 用于显示文件系统的磁盘空间占用情况。 df -h-h 参数表示以人类可读的格式&#xff08;如 GB, MB&#xff09;显示。输出会显示每…...

Solon MVC 的 @Mapping 用法说明

在 Solon Mvc 里&#xff0c;Mapping 注解一般是配合 Controller 和 Remoting&#xff0c;作请求路径映射用的。且&#xff0c;只支持加在 public 函数 或 类上。 1、注解属性 属性说明备注value路径与 path 互为别名path路径与 value 互为别名method请求方式限定(defall)可用…...

uni-app表单⑪

文章目录 十七、用户登录-登录界面搭建一、结构样式代码编写 十八、用户登录-表单验证一、userRulesMixin 文件使用二、验证规则编写 十七、用户登录-登录界面搭建 一、结构样式代码编写 uni-forms 插件下载 下载地址&#xff1a;https://ext.dcloud.net.cn/plugin?id2773 s…...

PyQt5 加载UI界面与资源文件

步骤一: 使用 Qt Designer 创建 XXX.ui文件 步骤二: 使用 Qt Designer 创建 资源文件 步骤三: Python文件中创建相关类, 使用 uic.loadUi(mainwidget.ui, self ) 加载UI文件 import sys from PyQt5 import QtCore, QtWidgets, uic from PyQt5.QtCore import Qt f…...

【MySQL】数据库知识突破:数据类型全解析与详解

前言&#xff1a;本节内容讲述MySQL的数据类型&#xff0c; 我们在学习之前的建表的时候已经用过各种各样的数据类型。 比如int、varchar、char类型等等。其中它们是对表的结构的操作&#xff0c; 并没有对数据的内容进行操作&#xff0c;所以它叫做DDL。另外&#xff0c;还有…...

React从基础入门到高级实战:React 实战项目 - 项目五:微前端与模块化架构

React 实战项目&#xff1a;微前端与模块化架构 欢迎来到 React 开发教程专栏 的第 30 篇&#xff01;在前 29 篇文章中&#xff0c;我们从 React 的基础概念逐步深入到高级技巧&#xff0c;涵盖了组件设计、状态管理、路由配置、性能优化和企业级应用等核心内容。这一次&…...

【工具教程】多个条形码识别用条码内容对图片重命名,批量PDF条形码识别后用条码内容批量改名,使用教程及注意事项

一、条形码识别改名使用教程 打开软件并选择处理模式&#xff1a;打开软件后&#xff0c;根据要处理的文件类型&#xff0c;选择 “图片识别模式” 或 “PDF 识别模式”。如果是处理包含条形码的 PDF 文件&#xff0c;就选择 “PDF 识别模式”&#xff1b;若是处理图片文件&…...

深入理解 C++ 左值右值、std::move 与函数重载中的参数传递

在 C 编程中&#xff0c;左值和右值的概念以及std::move的使用&#xff0c;常常让开发者感到困惑。特别是在函数重载场景下&#xff0c;如何合理利用这些特性来优化代码性能、确保语义正确&#xff0c;更是一个值得深入探讨的话题。 在开始之前&#xff0c;先提出几个问题&…...

篇章一 论坛系统——前置知识

目录 1.软件开发 1.1 软件的生命周期 1.2 面向对象 1.3 CS、BS架构 1.CS架构​编辑 2.BS架构 1.4 软件需求 1.需求分类 2.需求获取 1.5 需求分析 1. 工作内容 1.6 面向对象分析 1.OOA的任务 2.统一建模语言UML 3. 用例模型 3.1 用例图的元素 3.2 建立用例模型 …...

软件工程教学评价

王海林老师您好。 您的《软件工程》课程成功地将宏观的理论与具体的实践相结合。上半学期的理论教学中&#xff0c;您通过丰富的实例&#xff0c;将“高内聚低耦合”、SOLID原则等抽象概念解释得十分透彻&#xff0c;让这些理论不再是停留在纸面的名词&#xff0c;而是可以指导…...

关于 ffmpeg设置摄像头报错“Could not set video options” 的解决方法

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/148515355 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV…...

安宝特案例丨寻医不再长途跋涉?Vuzix再次以AR技术智能驱动远程医疗

加拿大领先科技公司TeleVU基于Vuzix智能眼镜打造远程医疗生态系统&#xff0c;彻底革新患者护理模式。 安宝特合作伙伴TeleVU成立30余年&#xff0c;沉淀医疗技术、计算机科学与人工智能经验&#xff0c;聚焦医疗保健领域&#xff0c;提供AR、AI、IoT解决方案。 该方案使医疗…...

【见合八方平面波导外腔激光器专题系列】用于干涉光纤传感的低噪声平面波导外腔激光器2

----翻译自Mazin Alalus等人的文章 摘要 1550 nm DWDM 平面波导外腔激光器具有低相位/频率噪声、窄线宽和低 RIN 等特点。该腔体包括一个半导体增益芯片和一个带布拉格光栅的平面光波电路波导&#xff0c;采用 14 引脚蝶形封装。这种平面波导外腔激光器设计用于在振动和恶劣的…...

Git 使用大全:从入门到精通

Git 是目前最流行的分布式版本控制系统&#xff0c;被广泛应用于软件开发中。本文将全面介绍 Git 的各种功能和使用方法&#xff0c;包含大量代码示例和实践建议。 文章目录 Git 基础概念版本控制系统Git 的特点Git 的三个区域Git 文件状态 Git 安装与配置安装 GitLinuxmacOSWi…...

Java线程池核心原理与最佳实践

Java 线程池详解 线程池是Java并发编程的核心组件&#xff0c;它能高效管理线程生命周期&#xff0c;避免频繁创建销毁线程的开销&#xff0c;提升系统性能和资源利用率。 一、线程池核心优势 降低资源消耗&#xff1a;复用已创建的线程&#xff0c;减少线程创建销毁开销提高…...