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

raft一致性协议

Raft 协议raft协议是基于TCP的选举机制&#xff1a;时间 日志 版本核心三要素&#xff1a;时间 (随机超时)&#xff1a;Follower 都有一个选举超时时间&#xff08;例如 150ms ~ 300ms 的随机值&#xff09;。作用&#xff1a;防止多个 Follower 同时变成 Candidate 导致选票…...

esp开发与应用(1602液晶显示屏)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】模块当中&#xff0c;有的是比较简单的&#xff0c;比如说蜂鸣器&#xff0c;尤其是有源蜂鸣器。大家可以把它想象成是一个gpio输出的喇叭&#xff…...

[开源] 康复处方安全卫士:面向康复科与临床药学的处方前置风险拦截系统

本项目是专为康复医学场景设计的处方安全校验工具&#xff0c;对接医院信息系统&#xff08;HIS&#xff09;中的康复理疗处方流程&#xff0c;在医生提交前实时识别禁忌证与物理因子之间的互斥风险。核心机制由两部分构成&#xff1a;一是基于 YAML 定义的「禁忌证物理因子」互…...

文房四宝-徽墨

文房四宝&#xff0c;除了你已经熟悉的墨&#xff08;以徽墨为代表&#xff09;&#xff0c;还包括笔、纸、砚。这套书写工具共同构成了中国传统文化中文房雅器的核心&#xff0c;每一宝都有其最具代表性的产地与传奇故事。简单来说就是&#xff1a;湖笔、徽墨、宣纸、端砚。&a…...

2026年AI论文写作软件盘点:12款神器助你高效完成去痕改写、润色和过检

随着 AI 技术的持续突破&#xff0c;2026 年的论文写作工具市场已进入“智能化、精细化、合规化”的全新发展阶段。从本科生的课程论文到研究生的学位论文&#xff0c;再到科研人员的期刊投稿&#xff0c;AI 工具正以强大的技术支撑覆盖各类学术场景。无论是选题方向的启发、文…...

有哪些免费好用的在线论文排版工具值得推荐?

毕业季最让人头疼的&#xff0c;从来都不是论文内容创作&#xff0c;而是繁琐的格式排版 —— 标题层级错乱、目录更新失效、参考文献格式不规范、页眉页脚混乱…… 手动调整动辄耗费数小时&#xff0c;还容易反复返工。其实&#xff0c;多款免费好用的在线论文排版工具已能完美…...

如何构建高效笔记系统:解锁OneNote智能编辑新体验

如何构建高效笔记系统&#xff1a;解锁OneNote智能编辑新体验 【免费下载链接】NoteWidget Markdown add-in for Microsoft Office OneNote 项目地址: https://gitcode.com/gh_mirrors/no/NoteWidget 在数字时代&#xff0c;高效的知识管理已成为专业人士的核心竞争力。…...

如何构建企业级自动化预约系统:架构设计与工程实践

如何构建企业级自动化预约系统&#xff1a;架构设计与工程实践 【免费下载链接】campus-imaotai i茅台app自动预约&#xff0c;每日自动预约&#xff0c;支持docker一键部署&#xff08;本项目不提供成品&#xff0c;使用的是已淘汰的算法&#xff09; 项目地址: https://git…...

从 ROI 看:什么时候只用单 Agent 更优

从 ROI 看&#xff1a;什么时候只用单 Agent 更优一、 引言 (Introduction) 1.1 钩子 (The Hook) 你有没有见过这样的项目场景&#xff1f; 场景1&#xff1a;创业公司MVP阶段 小团队只有2个算法工程师、1个全栈&#xff0c;预算只有30万/月的云服务和人力折算&#xff08;算法…...

初次在Taotoken模型广场切换不同模型进行文本生成的体验

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 初次在Taotoken模型广场切换不同模型进行文本生成的体验 作为一名开发者&#xff0c;初次接触大模型聚合平台时&#xff0c;最关心…...