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

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

IP如何挑?2025年海外专线IP如何购买?

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

排序算法总结(C++)

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

FFmpeg avformat_open_input函数分析

函数内部的总体流程如下&#xff1a; avformat_open_input 精简后的代码如下&#xff1a; int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...

全面解析数据库:从基础概念到前沿应用​

在数字化时代&#xff0c;数据已成为企业和社会发展的核心资产&#xff0c;而数据库作为存储、管理和处理数据的关键工具&#xff0c;在各个领域发挥着举足轻重的作用。从电商平台的商品信息管理&#xff0c;到社交网络的用户数据存储&#xff0c;再到金融行业的交易记录处理&a…...

接口 RESTful 中的超媒体:REST 架构的灵魂驱动

在 RESTful 架构中&#xff0c;** 超媒体&#xff08;Hypermedia&#xff09;** 是一个核心概念&#xff0c;它体现了 REST 的 “表述性状态转移&#xff08;Representational State Transfer&#xff09;” 的本质&#xff0c;也是区分 “真 RESTful API” 与 “伪 RESTful AP…...