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

el-form表单中不同数据类型对应的时间格式化和校验规则

 1. 在表单中, 当选择不同的数据类型时, 需要在下面选择时间时和数据类型对应上, 通过监听数据类型的变化, 给时间做格式化,

2. 但是当不按顺序选择数据类型后, 再选时间可能会报错, 所以需要在dom更新后, 再清空表单.

3. 校验规则, 结束时间需要大于开始时间, 但是不能选当前的时间, 所以需要转换时间戳.

 

 

 <el-formref="formRef1":model="form1":rules="rules1"label-width="110px":inline="true"class="demo-form-inline"><el-form-item label="数据类型" prop="type"><el-select v-model="form1.type" placeholder="请选择"><el-optionv-for="item in dataList":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item><el-form-item label="开始时间" prop="startTime"><el-date-pickerref="startTimePickerRef"v-model="form1.startTime":type="dateType":format="timeFormat":value-format="timeFormat"placeholder="开始时间"></el-date-picker></el-form-item><el-form-item label="结束时间" prop="endTime"><el-date-pickerref="endTimePickerRef"v-model="form1.endTime":type="dateType":format="timeFormat":value-format="timeFormat"placeholder="结束时间"></el-date-picker></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="resetForm('formRef1')">取 消</el-button><el-button type="primary" @click="submitData('formRef1', 1)">生成数据</el-button></span></el-dialog>
<script>
import moment from "moment";export default {data() {var checkTime = (rule, value, callback) => {// console.log(value, "---value---"); // value 是endTime// 获取开始时间和结束时间的时间戳const startTime = moment(this.form1.startTime).format("yyyy-MM-DD HH:mm:ss");const endTime = moment(value).format("yyyy-MM-DD HH:mm:ss");const startTimeStamp = new Date(startTime).getTime();const endTimeStamp = new Date(endTime).getTime();if (this.form1.type === "2") {// 小时数据,不能大于等于当前小时const currentDate = new Date(); // 获取当前日期和时间currentDate.setMinutes(0, 0, 0); // 将分钟、秒、毫秒都设置为0,表示0分0秒const currentHourTimeStamp = currentDate.getTime(); // 获取当前小时时间戳if (endTimeStamp < startTimeStamp) {callback(new Error("结束时间应该大于或等于开始时间"));} else if (endTimeStamp >= currentHourTimeStamp) {callback(new Error("结束时间应该早于当前时间"));} else {callback();}} else if (this.form1.type === "3" || this.form1.type === "4") {// 日数据或周数据,不能大于等于当日const currentDateTimeStamp = new Date().setHours(0, 0, 0, 0); //将小时、分钟、秒和毫秒设置为0if (endTimeStamp < startTimeStamp) {callback(new Error("结束时间应该大于或等于开始时间"));} else if (endTimeStamp >= currentDateTimeStamp) {callback(new Error("结束时间应该早于当前时间"));} else {callback();}} else if (this.form1.type === "5") {// 月数据,不能大于等于当月const currentDate = new Date();currentDate.setDate(1); // 将日期设置为1,表示当前月的第一天currentDate.setHours(0, 0, 0, 0); // 将小时、分钟、秒、毫秒都设置为0,表示0点0分0秒const firstDayOfMonthTimestamp = currentDate.getTime(); // 获取时间戳if (endTimeStamp < startTimeStamp) {callback(new Error("结束时间应该大于或等于开始时间"));} else if (endTimeStamp >= firstDayOfMonthTimestamp) {callback(new Error("结束时间应该早于当前月"));} else {callback();}} else {// 分钟数据,不能大于等于当前分钟const currentDate = new Date(); // 获取当前日期和时间currentDate.setMinutes(0, 0); // 将秒、毫秒都设置为0,表示0分0秒const currentMinTimeStamp = currentDate.getTime(); // 获取时间戳if (endTimeStamp < startTimeStamp) {callback(new Error("结束时间应该大于或等于开始时间"));} else if (endTimeStamp >= currentMinTimeStamp) {callback(new Error("结束时间应该早于当前时间"));} else {callback();}}};return {form1: {stationCodes: [], // 数据生成配置里可多选type: "", // 数据类型startTime: "",endTime: "",precisionNum: null, // 精确位数remark: "", // 备注},// 数据类型dataList: [// {//   label: "分钟数据",//   value: "1",// },{label: "小时数据",value: "2",},{label: "日数据",value: "3",},{label: "周数据",value: "4",},{label: "月数据",value: "5",},],dateType: "date", // 时间类型timeFormat: "", // 默认时间格式rules1: {type: [{ required: true, message: "请选择数据类型", trigger: "change" }],startTime: [{required: true,message: "请选择开始时间",trigger: "blur",},],endTime: [{required: true,message: "请选择结束时间",trigger: "blur",},{validator: checkTime,trigger: "blur",},],};},watch: {"form1.type": function (newType) {if (newType === "1") {// 设置时间格式为分钟this.dateType = "datetime";this.timeFormat = "yyyy-MM-dd HH:mm";} else if (newType === "2") {// 设置时间格式为小时this.dateType = "datetime";this.timeFormat = "yyyy-MM-dd HH";} else if (newType === "3") {// 设置时间格式为日期this.dateType = "date";this.timeFormat = "yyyy-MM-dd";} else if (newType === "4") {// 设置时间格式为周,这里周德格式后台要求还显示日的this.dateType = "date";this.timeFormat = "yyyy-MM-dd";} else if (newType === "5") {// 设置时间格式为月份this.dateType = "month";this.timeFormat = "yyyy-MM";}// 更新值和格式,如果不按顺序选择类型的话可能会报错,所以dom更新后清空this.$nextTick(() => {this.form1.startTime = "";this.form1.endTime = "";if (this.$refs.startTimePickerRef) {this.$refs.startTimePickerRef.$el.querySelector("input").value = "";}if (this.$refs.endTimePickerRef) {this.$refs.endTimePickerRef.$el.querySelector("input").value = "";}});},},

相关文章:

el-form表单中不同数据类型对应的时间格式化和校验规则

1. 在表单中, 当选择不同的数据类型时, 需要在下面选择时间时和数据类型对应上, 通过监听数据类型的变化, 给时间做格式化, 2. 但是当不按顺序选择数据类型后, 再选时间可能会报错, 所以需要在dom更新后, 再清空表单. 3. 校验规则, 结束时间需要大于开始时间, 但是不能选当前的…...

Python代码雨

系列文章 序号文章目录直达链接1浪漫520表白代码https://want595.blog.csdn.net/article/details/1306668812满屏表白代码https://want595.blog.csdn.net/article/details/1297945183跳动的爱心https://want595.blog.csdn.net/article/details/1295031234漂浮爱心https://want…...

java.util.Optional

原文链接 文章目录 1、Optional作用2、常用API构造相关get / orElse / orElseGet / orElseThrowisPresent / ifPresentfiltermap / flatMap 3、源码翻译 1、Optional作用 类位于&#xff1a;java.util.Optional臭名昭著的空指针异常是导致Java应用程序失败的最常见原因&#…...

微服务--Seata(分布式事务)

TCC模式在代码中实现&#xff1a;侵入性强&#xff0c;并且的自己实现事务控制逻辑 Try&#xff0c;Confirm() cancel() 第三方开源框架&#xff1a;BeyeTCC\TCC-transaction\Himly 异步实现&#xff1a;MQ可靠消息最终一致性 GlobalTransacational---AT模式...

发光太阳聚光器的蒙特卡洛光线追踪研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

(涨知识)-圣诞灯串类产品出口都需要做哪些认证?

1. 首先我们讲讲欧盟&#xff0c; 欧盟一向都是合规要求特别多的一个国家&#xff0c;所以向欧盟出口灯串等电子产品&#xff0c;一定要长个心眼。废话不多说&#xff0c;进入正题吧&#xff01; ①欧盟产品安全&#xff1a;欧代CE(电磁指令EMC低压指令LVD)DOC 产品安全必备三件…...

ROS地图/像素坐标描点调试【Python源码实现】

文章目录 ROS python 地图描点调试工具1. Rviz描点1.1 需求描述1.2 visualization Marker1.3 工程实践 2. 静态地图图片描点2.1 需求描述2.2 工程实践 ROS python 地图描点调试工具 1. Rviz描点 1.1 需求描述 在ROS开发中&#xff0c;有时会加载图片文件转为地图载入move_ba…...

2023年7月京东笔记本电脑行业品牌销售排行榜(京东数据平台)

随着智能手机、平板电脑等移动互联设备的普及&#xff0c;人们对于个人电脑的依赖减轻&#xff0c;加之电脑的更换率较低&#xff0c;因此当前PC端消费市场整体出现疲态&#xff0c;笔记本电脑的出货量不断下降&#xff0c;今年7月份也同样呈现这一趋势。 根据鲸参谋电商数据分…...

用户忠诚度:小程序积分商城的用户保持方法

随着移动互联网的蓬勃发展&#xff0c;小程序积分商城已经成为了许多企业私域营销的热门选择。这个商城不仅可以吸引用户参与&#xff0c;还可以提高用户的忠诚度&#xff0c;进一步加深用户与品牌的互动关系。然而&#xff0c;要实现用户的忠诚度&#xff0c;需要一系列的策略…...

[前端] 使用lerna version更新版本号

lerna version 是一个用于管理 monorepo&#xff08;多包存储库&#xff09;的工具&#xff0c;它可以帮助您在多个相关包之间协调版本号的更新和发布。以下是使用 lerna version 更新版本号的一般步骤&#xff1a; 安装 Lerna&#xff1a; 首先&#xff0c;您需要在您的项目中…...

winform嵌入浏览器 webView2

1、项目引用nuget 2、winform窗体中初始化 var webView new WebView2();webView.Source new Uri(url);webView.Dock DockStyle.Fill;//接收js调用c#函数的消息webView.WebMessageReceived CoreWebView2_WebMessageReceivedAsync; this.panel1.Controls.Add(…...

stm32---用外部中断实现红外接收器

一、红外遥控的原理 红外遥控是一种无线、非接触控制技术&#xff0c;具有抗干扰能力强&#xff0c;信息传 输可靠&#xff0c;功耗低&#xff0c;成本低&#xff0c;易实现等显著优点&#xff0c;被诸多电子设备特别是 家用电器广泛采用&#xff0c;并越来越多的应用到计算机系…...

Filter过滤器及HttpServletRequest和HttpServletResponse

拦截器&#xff08;Interceptor&#xff09;和过滤器&#xff08;Filter&#xff09;的执行顺序 tomcat->Filter->Interceptor->Controller 过滤器&#xff08;Filter&#xff09;概述&#xff1f; Filter过滤器是JavaWeb的三大组件之一&#xff0c;三大组件分别为&…...

02-打包代码与依赖

打包代码与依赖说明 在开发中&#xff0c;我们写的应用程序通常需要依赖第三方的库&#xff08;即程序中引入了既不在 org.apache.spark包&#xff0c;也不再语言运行时的库的依赖&#xff09;&#xff0c;我们就需要确保所有的依赖在Spark应用运行时都能被找到 对于Python而…...

Kotlin(五) 循环语句

目录 For循环 关键字 until step downTo Java中主要有两种循环语句&#xff1a;while循环和for循环。而Kotlin也提供了while循环和for循环&#xff0c;其中while循环不管是在语法还是使用技巧上都和Java中的while循环没有任何区别&#xff0c;因此我们就直接跳过不进行讲解…...

数字孪生产品:数字化时代的变革引擎

数字孪生技术&#xff0c;作为一项前沿的科技创新&#xff0c;正在不断改变我们的世界。它为各行各业的发展提供了无限的可能性&#xff0c;成为了当今数字化时代的一大亮点。数字孪生产品&#xff0c;作为数字孪生技术的具体应用&#xff0c;将在未来发挥越来越重要的作用。 数…...

对接西部数据Western Digital EDI 系统

近期我们为国内某知名电子产品企业提供EDI解决方案&#xff0c;采用知行之桥 EDI 系统作为核心组件&#xff0c;成功与西部数据Western Digital&#xff08;简称西数&#xff09;建立EDI连接&#xff0c;实现数据安全且自动化传输。 EDI实施需求 EDI连接 传输协议&#xff1a;A…...

ClickHouse进阶(十):Clickhouse数据查询-4

进入正文前&#xff0c;感谢宝子们订阅专题、点赞、评论、收藏&#xff01;关注IT贫道&#xff0c;获取高质量博客内容&#xff01; &#x1f3e1;个人主页&#xff1a;含各种IT体系技术,IT贫道_Apache Doris,大数据OLAP体系技术栈,Kerberos安全认证-CSDN博客 &#x1f4cc;订阅…...

FPGA原理与结构——FIFO IP核的使用与测试

一、前言 本文介绍FIFO Generator v13.2 IP核的具体使用与例化&#xff0c;在学习一个IP核的使用之前&#xff0c;首先需要对于IP核的具体参数和原理有一个基本的了解&#xff0c;具体可以参考&#xff1a; FPGA原理与结构——FIFO IP核原理学习https://blog.csdn.net/apple_5…...

ABB CMA120 3DDE300400面板

人机界面&#xff1a;ABB CMA120 3DDE300400 面板通常具有用户友好的人机界面&#xff0c;可用于监视和控制连接设备和系统的操作。 图形显示&#xff1a;该面板通常具有高分辨率的液晶显示屏&#xff0c;用于显示图形界面和实时数据&#xff0c;以便操作员更容易理解和管理工…...

多云管理“拦路虎”:深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

基于ASP.NET+ SQL Server实现(Web)医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

(二)TensorRT-LLM | 模型导出(v0.20.0rc3)

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...