当前位置: 首页 > 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;以便操作员更容易理解和管理工…...

从GitHub克隆到点亮LED:手把手教你用Ubuntu编译调试别人的STM32工程

从GitHub克隆到点亮LED&#xff1a;手把手教你用Ubuntu编译调试别人的STM32工程 在开源硬件社区&#xff0c;GitHub上每天都有大量优秀的STM32项目被分享——从智能家居控制器到四轴飞行器飞控系统。但当开发者满怀期待地git clone后&#xff0c;却常常在第一步"编译通过&…...

药物发现自动化:FEP计算工作流引擎faah的设计原理与实战

1. 项目概述&#xff1a;一个面向药物发现的自动化工作流引擎 最近在药物研发的自动化工具领域&#xff0c;一个名为 kiron0/faah 的项目引起了我的注意。这并非一个简单的脚本集合&#xff0c;而是一个设计精巧、旨在为药物发现中的自由能微扰计算提供端到端自动化解决方案的…...

Cursor与Figma通过MCP协议实现AI辅助设计与开发同步

1. 项目概述&#xff1a;当代码编辑器与设计工具“开口说话”最近在开发者社区里&#xff0c;一个名为“cursor-talk-to-figma-mcp”的项目引起了我的注意。这个由开发者“hamadoun1760”开源的仓库&#xff0c;名字直译过来就是“Cursor与Figma对话的MCP”。乍一看&#xff0c…...

基于Go的轻量级自托管IM系统OpenWhisp部署与架构解析

1. 项目概述&#xff1a;一个开源的即时通讯解决方案最近在折腾一个内部协作工具&#xff0c;需要集成一个轻量级的即时通讯模块。市面上成熟的方案不少&#xff0c;但要么是SaaS服务&#xff0c;数据不在自己手里&#xff0c;心里不踏实&#xff1b;要么是像Rocket.Chat、Matt…...

Maestro:基于YAML的声明式任务编排引擎,实现DevOps自动化工作流

1. 项目概述&#xff1a;从“指挥家”到“自动化交响乐”在软件开发和运维的世界里&#xff0c;我们常常扮演着“救火队员”的角色。一个微服务挂了&#xff0c;需要手动登录服务器查看日志&#xff1b;一个API接口响应慢了&#xff0c;得去翻监控图表找原因&#xff1b;新功能…...

阿里云百炼 - Claude Code 配置指南

Claude Code 是 Anthropic 推出的命令行 AI 编程助手&#xff0c;可以通过按量计费、Coding Plan 或 Token Plan 团队版接入阿里云百炼。 安装 Claude Code 安装 macOS Windows 在 Windows 上使用 Claude Code&#xff0c;需要安装 WSL 或 Git for Windows&#xff0c;然后…...

VirtualBox虚拟机中搭建VxWorks 5.5开发调试环境全攻略

1. 项目概述与核心思路最近在折腾一个老项目&#xff0c;需要在一个特定的嵌入式实时操作系统环境下进行调试和验证。这个系统就是VxWorks&#xff0c;一个在工业控制、航空航天等领域有着深厚积累的RTOS。手头没有现成的硬件板卡&#xff0c;搭建一套物理开发环境又费时费力&a…...

五分钟完成python脚本配置直连taotoken多模型服务

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 五分钟完成 Python 脚本配置直连 Taotoken 多模型服务 基础教程类&#xff0c;面向刚接触 Taotoken 的 Python 开发者&#xff0c;…...

英雄联盟终极自动化工具:LeagueAkari 免费完整指南,告别繁琐操作

英雄联盟终极自动化工具&#xff1a;LeagueAkari 免费完整指南&#xff0c;告别繁琐操作 【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power &#x1f680;. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 你是否…...

告别风扇噪音与高温:FanControl让你的Windows电脑安静又冷静

告别风扇噪音与高温&#xff1a;FanControl让你的Windows电脑安静又冷静 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Trend…...