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

P1103 书本整理【洛谷算法习题】

P1103 书本整理 网页链接 P1103 书本整理 题目描述 Frank 是一个非常喜爱整洁的人。他有一大堆书和一个书架&#xff0c;想要把书放在书架上。书架可以放下所有的书&#xff0c;所以 Frank 首先将书按高度顺序排列在书架上。但是 Frank 发现&#xff0c;由于很多书的宽度不…...

Phi-3-mini-4k-instruct-gguf完整指南:GGUF轻量模型在边缘设备的适配实践

Phi-3-mini-4k-instruct-gguf完整指南&#xff1a;GGUF轻量模型在边缘设备的适配实践 1. 模型概述 Phi-3-mini-4k-instruct-gguf是微软Phi-3系列中的轻量级文本生成模型GGUF版本&#xff0c;专为边缘计算设备优化设计。这个模型特别适合在资源受限的环境中执行问答、文本改写…...

FixPlus-v1.56.148 一键擦除,会员功能直接解锁

核心功能 AI智能擦除技术可精准识别并移除照片中的干扰元素&#xff08;如路人、杂物&#xff09;&#xff0c;自动填补背景&#xff0c;处理效果自然无痕。AI换衣功能支持智能服装替换与风格调整&#xff0c;为创意编辑提供更多可能。 操作便捷性 无需专业技巧&#xff0c;通…...

如何解决ViPER4Windows兼容性难题?5步打造Windows 10/11音效增强终极方案

如何解决ViPER4Windows兼容性难题&#xff1f;5步打造Windows 10/11音效增强终极方案 【免费下载链接】ViPER4Windows-Patcher Patches for fix ViPER4Windows issues on Windows-10/11. 项目地址: https://gitcode.com/gh_mirrors/vi/ViPER4Windows-Patcher 副标题&…...

PlugY:暗黑破坏神2单机体验增强插件

PlugY&#xff1a;暗黑破坏神2单机体验增强插件 【免费下载链接】PlugY PlugY, The Survival Kit - Plug-in for Diablo II Lord of Destruction 项目地址: https://gitcode.com/gh_mirrors/pl/PlugY 核心痛点&#xff1a;单机暗黑2的体验瓶颈何在&#xff1f; 暗黑破坏…...

为什么你的C盘空间总是不够用?可能是Windows驱动文件在悄悄“发胖“

为什么你的C盘空间总是不够用&#xff1f;可能是Windows驱动文件在悄悄"发胖" 【免费下载链接】DriverStoreExplorer Driver Store Explorer 项目地址: https://gitcode.com/gh_mirrors/dr/DriverStoreExplorer 想象一下这样的场景&#xff1a;你的电脑C盘明明…...

NaViL-9B多场景应用:医疗报告图解、工业缺陷识别、文档智能审阅

NaViL-9B多场景应用&#xff1a;医疗报告图解、工业缺陷识别、文档智能审阅 1. 平台简介 NaViL-9B是上海人工智能实验室研发的原生多模态大语言模型&#xff0c;具备强大的文本理解和图像分析能力。不同于传统单一模态模型&#xff0c;NaViL-9B能够同时处理纯文本问答和图片理…...

golang如何实现零知识证明基础_golang零知识证明基础实现教程

Go 不内置零知识证明能力&#xff0c;需依赖第三方库&#xff1b;主流ZKP工具链绑定Rust/C/TS&#xff0c;Go生态缺乏生产级原生实现&#xff1b;crypto包仅提供基础原语&#xff0c;无法支撑ZKP所需多项式承诺、配对运算等高级密码操作。Go 本身不内置零知识证明&#xff08;Z…...

Java互联网大厂求职面试实录:Spring Boot、微服务与全栈技术深度解析

Java互联网大厂求职面试实录&#xff1a;Spring Boot、微服务与全栈技术深度解析 面试场景介绍 本文以互联网大厂面试为背景&#xff0c;通过严肃的面试官与搞笑的水货程序员“谢飞机”的对话&#xff0c;深入探讨Java求职者面试中常见的技术问题。涵盖Java SE、Jakarta EE、Sp…...

避坑指南:在YOLOv5-7.0中融合BiFPN时,如何平衡P2检测头带来的精度与速度损耗?

YOLOv5-7.0中BiFPN与P2检测头的精度与速度平衡实战 当你在无人机航拍画面中寻找几毫米大小的电子元件时&#xff0c;或者在显微镜图像中定位细胞核位置时&#xff0c;传统目标检测模型的性能往往会大打折扣。这正是微小目标检测技术大显身手的场景——而YOLOv5作为工业界最受欢…...