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

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

<el-col :span="8">
            <el-form-item label="开始时间" prop="startDate" :rules="globalRules.requiredBlurOrChange">
              <el-date-picker
                v-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-picker
                v-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.endDate
          console.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
        }
      }
    },
  },

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

模拟 [leecode 54] 螺旋矩阵

一、题解&#xff1a;上下左右四条线不断收紧 int l 0, r matrix[0].size() - 1;int high 0, low matrix.size() - 1;从左到右&#xff0c;顶部一层遍历完往下移一位&#xff0c;high&#xff1b;if(high>low) break;//遍历完了从上到下&#xff0c;遍历完右侧往左移一位…

丹摩征文活动|Llama3.1的部署与使用指南

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀ 丹摩征文 1. 初识Llama3.12. 部署流程创建实例登录实例部署LLama3.1 3. 实践使用教程4. 实践感想 前言&#xff1a;人工智能&#xff08;AI&…

人际交往中,想要有好人缘,需做到“三要”,做到一个,也是好事

人际交往中&#xff0c;想要有好人缘&#xff0c;需做到“三要”&#xff0c;做到一个&#xff0c;也是好事 在这个世上&#xff0c;每个人都是一座孤岛&#xff0c;但通过人际交往这座桥梁&#xff0c;我们能够彼此相连&#xff0c;共同编织出一张温暖的社会网络。 好人缘&a…

Sql server 备份还原方法

备份 方法1&#xff0c;选择对应的数据库名-------》右键 任务---------》备份 默认备份类型 完整 文件后缀 .bak 方法2,选择对应的数据库名-------》右键 任务----------》生成脚本 选择要编写的数据库对象(表&#xff0c;视图&#xff0c;存储过程等) 选择对应的 服…

NVR设备ONVIF接入平台EasyCVR私有化部署视频平台如何安装欧拉OpenEuler 20.3 MySQL

在当今数字化时代&#xff0c;安防视频监控系统已成为保障公共安全和个人财产安全的重要工具。NVR设备ONVIF接入平台EasyCVR作为一款功能强大的智能视频监控管理平台&#xff0c;它不仅提供了视频远程监控、录像、存储与回放等基础功能&#xff0c;还涵盖了视频转码、视频快照、…

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

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

管理 Elasticsearch 变得更容易了,非常容易!

作者&#xff1a;来自 Elastic Ken Exner Elasticsearch 用户&#xff0c;我们听到了你的心声。管理 Elasticsearch 有时会变得很复杂&#xff0c;面临的挑战包括性能调整、问题检测和资源优化。我们一直致力于简化你的体验。今天&#xff0c;我们宣布了自收购 Opster 以来的一…

Android Parcelable和Serializable的区别与联系

在Android开发中&#xff0c;Parcelable和Serializable是两种用来在组件之间传递数据的序列化机制。它们有不同的使用场景和性能特点。 以下是它们之间的关系和区别&#xff1a; 1. 什么是 Parcelable Parcelable 是 Android 特有的接口&#xff0c;用于高效地在进程间传递数…

Moonshine - 新型开源ASR(语音识别)模型,体积小,速度快,比OpenAI Whisper快五倍 本地一键整合包下载

Moonshine 是由 Useful Sensors 公司推出的一系列「语音到文本&#xff08;speech-to-text, STT&#xff09;转换模型」&#xff0c;旨在为资源受限设备提供快速而准确的「自动语音识别&#xff08;ASR&#xff09;服务」。Moonshine 的设计特别适合于需要即时响应的应用场景&a…

GitHub桌面版汉化

桌面版下载地址 https://desktop.github.com/ 汉化包下载地址 Releases cngege/GitHubDesktop2Chinese GitHub 点击运行 重启后

linux-vlan(1)

# VLAN # 1.topo # 2.创建命名空间 ip netns add ns1 ip netns add ns2 ip netns add ns3 # 3.创建veth设备 ip link add ns1-veth0 type veth peer name ns21-veth0 ip link add ns3-veth0 type veth peer name ns23-veth0 # 4.veth设备放入命名空间,启动接口 ip link set n…

鸿蒙ArkTS中的获取网络数据

一、通过web组件加载网页 在C/S应用程序中&#xff0c;都有网络组件用于加载网页&#xff0c;鸿蒙ArkTS中也有类似的组件。   web组件&#xff0c;用于加载指定的网页&#xff0c;里面有很多的方法可以调用&#xff0c;虽然现在用得比较少&#xff0c;了解还是必须的。   演…

屏幕解析工具——OmniParser

0 引言 OmniParser是微软开源的一种屏幕解析工具&#xff0c;提供了一种将用户界面截图解析为结构化元素的综合方法&#xff0c;通过此方法可以对UI界面进行可交互元素的提取和描述&#xff0c;然后将此结构化信息和任务指令&#xff0c;输入到大模型中&#xff0c;以增强大模…

string------1

文章目录 一. STL1.概念2.版本 二. string类2.1 为什么学习string类2. 标准库中的string类2.2.1 构造&#xff08;7个&#xff09;2.2.2 对string类对象进行“访问和修改”&#xff08;1&#xff09;operator[]&#xff08;2&#xff09;迭代器1.迭代器的使用2.迭代器的价值&am…

Docker-软件容器平台

一、容器 1、什么是容器 容器就是将软件打包成标准化单元&#xff0c;以用于开发、交付和部署 容器镜像是轻量的、可执行的独立软件包 &#xff0c;包含软件运行所需的所有内容&#xff1a;代码、运行时环境、系统工具、系统库和设置。容器化软件适用于基于 Linux 和 Windows…

LED和QLED的区别

文章目录 1. 基础背光技术2. 量子点技术的引入3. 色彩表现4. 亮度和对比度5. 能效6. 寿命7. 价格总结 LED和 QLED都是基于液晶显示&#xff08;LCD&#xff09;技术的电视类型&#xff0c;但它们在显示技术、色彩表现和亮度方面有一些关键区别。以下是两者的详细区别&#xff…

速通LoRA:《LoRA: Low-Rank Adaptation of Large Language Models》全文解读

文章目录 总览AbstractIntroductionProblem StatementAren’t Existing Solutions Good Enough?Our MethodLow-Rank-Parametrized Update MatricesApplying LoRA to Transformer 何为高斯随机初始化Empirical ExperimentsBaselinesRoBERTa base/largeDeBERTa XXLGPT-2 medium/…

计算机图形学论文 | 木工设计与制造计划的共同优化

&#x1f98c;&#x1f98c;&#x1f98c;读论文 我们的系统共同探索离散设计变量和制造计划的空间&#xff0c;以生成&#xff08;设计&#xff0c;制造计划&#xff09;对的帕累托前沿&#xff0c;使制造成本最小化。在该图中&#xff0c;(a)是椅子的输入设计和仅探索该设计的…

NVR录像机汇聚管理EasyNVR多品牌NVR管理工具/设备:大华IPC摄像头局域网访问异常解决办法

在当今社会&#xff0c;安全监控已成为各类场所不可或缺的一部分。无论是家庭、学校、商业场所还是公共场所&#xff0c;安全监控设备都扮演着至关重要的角色。在众多监控品牌中&#xff0c;大华IPC摄像头凭借其高清画质、强大功能和卓越稳定性&#xff0c;赢得了市场的广泛认可…

phpcms-tree(PHP无限级别分类)

phpcms-tree&#xff0c;是一个从PHPCMS v9最新版中提取出来的无限级别分类的源码&#xff0c;可以整合到任何项目中。 使用方法 参考Src/index.php里的实例。 源码下载&#xff1a; 支持本程序&#xff0c;请到Gitee和GitHub给我们点Star&#xff01; Gitee&#xff1a;p…