Vue3时间选择器datetimerange在数据库存开始时间和结束时间

♥️作者:小宋1021
🤵‍♂️个人主页:小宋1021主页
♥️坚持分析平时学习到的项目以及学习到的软件开发知识,和大家一起努力呀!!!
🎈🎈加油! 加油! 加油! 加油
🎈欢迎评论 💬点赞👍🏻 收藏 📂加关注+!


如图,想往数据库存一个时间段,在后端用两个字段接收

实体类:

    /*** 开始时间*/private LocalDateTime meetingStartTime;/*** 结束时间*/private LocalDateTime meetingEndTime;

ParentMeetingRespVO:

   @Schema(description = "开始时间")private LocalDateTime meetingStartTime;@Schema(description = "结束时间")private LocalDateTime meetingEndTime;

ParentMeetingSaveReqVO:

    @Schema(description = "开始时间")private LocalDateTime meetingStartTime;@Schema(description = "结束时间")private LocalDateTime meetingEndTime;

controller:

    @PostMapping("/create")@Operation(summary = "创建家长会")@PreAuthorize("@ss.hasPermission('study:parent-meeting:create')")public CommonResult<Long> createParentMeeting(@Valid @RequestBody ParentMeetingSaveReqVO createReqVO) {return success(parentMeetingService.createParentMeeting(createReqVO));}

service:

    /*** 创建家长会** @param createReqVO 创建信息* @return 编号*/Long createParentMeeting(@Valid ParentMeetingSaveReqVO createReqVO);

实现类:

    @Overridepublic Long createParentMeeting(ParentMeetingSaveReqVO createReqVO) {// 插入ParentMeetingDO parentMeeting = BeanUtils.toBean(createReqVO, ParentMeetingDO.class);parentMeetingMapper.insert(parentMeeting);// 返回return parentMeeting.getId();}

前端:

组件:

 <el-form-item label="时间" prop="time"><el-date-pickerv-model="formData.time"style="width: calc(100% - 20px); font-size: 1px;"type="datetimerange"start-placeholder="开始时间"end-placeholder="结束时间"placeholder="选择时间"@change="changes"/></el-form-item>

点击事件,并转换成时间戳:

const changes=(e)=>{const date = new Date(e[0])const date2 = new Date(e[1])// 获取时间戳(毫秒)  const timestamp = date.getTime()const timestamp2 = date2.getTime()formData.value.meetingStartTime = timestampformData.value.meetingEndTime = timestamp2formData.value.time = [dateFormat(timestamp),dateFormat(timestamp2)]}

dateform转换:

const dateFormat = (value)=>{let date = new Date(value);let y = date.getFullYear();let MM = date.getMonth() + 1<10? ('0' + (date.getMonth() + 1)) : date.getMonth() + 1;let d = date.getDate()< 10 ? ('0' + date.getDate()) :  date.getDate()let h = date.getHours() < 10 ? ('0' +date.getHours()) : date.getHours();const m = date.getMinutes()< 10 ? ('0' + date.getMinutes()) : date.getMinutes();return  y + '-' + MM + '-' + d 
}

完整代码:

<template><Dialog :title="dialogTitle" v-model="dialogVisible" width="1100px"><el-formref="formRef":model="formData":rules="formRules"label-width="100px"v-loading="formLoading"><div style="padding: 8px 0;background: #f8fbff"><div class="tip"><div class="bold"></div><span class="btitle"></span></div><el-row :gutter="24"><el-form-item label="主题" prop="subject" style="width: 46%;margin-left: 15px ;"><el-input v-model="formData.subject" placeholder="请输入主题" /></el-form-item></el-row><el-row><el-form-item label="班级名称" prop="className"><el-select v-model="formData.className" placeholder="请选择班级名称"><el-option label="班级名称" value="" /></el-select></el-form-item></el-row><el-row><el-form-item label="时间" prop="time"><el-date-pickerv-model="formData.time"style="width: calc(100% - 20px); font-size: 1px;"type="datetimerange"start-placeholder="开始时间"end-placeholder="结束时间"placeholder="选择时间"@change="changes"/></el-form-item></el-row><!-- <el-form-item label="老师名称" prop="teacherName"><el-select v-model="formData.teacherName" placeholder="请选择老师名称"><el-option label="老师名称" value="" /></el-select></el-form-item> --><el-row><el-form-item label="形式" prop="type"><el-select v-model="formData.type" placeholder="请选择形式"><el-option label="形式" value="" /></el-select></el-form-item><!-- <el-form-item label="实到" prop="arrivedNum"><el-input v-model="formData.arrivedNum" placeholder="请输入实到" /></el-form-item> --><!-- <el-form-item label="状态" prop="status"><el-select v-model="formData.status" placeholder="请选择状态"><el-option label="状态" value="" /></el-select></el-form-item> --></el-row></div></el-form><template #footer><el-button @click="submitForm" type="primary" :disabled="formLoading">发 布</el-button><el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button><el-button @click="dialogVisible = false">取 消</el-button></template></Dialog>
</template>
<script setup lang="ts">
import { ParentMeetingApi, ParentMeetingVO } from '@/api/study/parentmeeting'
import { fr } from 'element-plus/es/locale';/** 家长会 表单 */
defineOptions({ name: 'ParentMeetingForm' })
const time = ref([
])
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
const formType = ref('') // 表单的类型:create - 新增;update - 修改
const formData = ref({id: undefined,className: undefined,subject: undefined,time: undefined,teacherName: undefined,type: undefined,arrivedNum: undefined,status: undefined,meetingContent: undefined,meetingImage: undefined,parentName: undefined,parentPhone: undefined,absentReason: undefined,arrivingNum: undefined,meetingStartTime: undefined,meetingEndTime: undefined,
})
const formRules = reactive({
})
const formRef = ref() // 表单 Ref/** 打开弹窗 */
const open = async (type: string, id?: number) => {dialogVisible.value = truedialogTitle.value = t('action.' + type)formType.value = typeresetForm()// 修改时,设置数据if (id) {formLoading.value = truetry {formData.value = await ParentMeetingApi.getParentMeeting(id)} finally {formLoading.value = false}}
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
const changes=(e)=>{const date = new Date(e[0])const date2 = new Date(e[1])// 获取时间戳(毫秒)  const timestamp = date.getTime()const timestamp2 = date2.getTime()formData.value.meetingStartTime = timestampformData.value.meetingEndTime = timestamp2formData.value.time = [dateFormat(timestamp),dateFormat(timestamp2)]}
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
const submitForm = async () => {// 校验表单await formRef.value.validate()// 提交请求formLoading.value = truetry {const data = formData.value as unknown as ParentMeetingVOif (formType.value === 'create') {await ParentMeetingApi.createParentMeeting(data)message.success(t('common.createSuccess'))} else {await ParentMeetingApi.updateParentMeeting(data)message.success(t('common.updateSuccess'))}dialogVisible.value = false// 发送操作成功的事件emit('success')} finally {formLoading.value = false}
}
const dateFormat = (value)=>{let date = new Date(value);let y = date.getFullYear();let MM = date.getMonth() + 1<10? ('0' + (date.getMonth() + 1)) : date.getMonth() + 1;let d = date.getDate()< 10 ? ('0' + date.getDate()) :  date.getDate()let h = date.getHours() < 10 ? ('0' +date.getHours()) : date.getHours();const m = date.getMinutes()< 10 ? ('0' + date.getMinutes()) : date.getMinutes();return  y + '-' + MM + '-' + d 
}
/** 重置表单 */
const resetForm = () => {formData.value = {id: undefined,className: undefined,subject: undefined,time: undefined,teacherName: undefined,type: undefined,arrivedNum: undefined,status: undefined,meetingContent: undefined,meetingImage: undefined,parentName: undefined,parentPhone: undefined,absentReason: undefined,arrivingNum: undefined,meetingStartTime: undefined,meetingEndTime: undefined,}formRef.value?.resetFields()
}
</script>
<style scoped lang="scss">
.el-form-item{width: 47%;
}
:deep(.el-form-item__label){width: 130px !important;
}
// .bold{
//   width: 20px;
//   height:20px;
//   border-radius: 50%;
//   background:#85afd5;
//   text-align: center;
//   margin-top:5px;
//   margin-left:-10px;
//   color:#fff
// }
// .btitle{
//   line-height:30px;
//   margin-left:10px;
//   color:#84b0d5
// }
// .tip{
//   border:1px solid #84b0d5;
//   border-radius:0 20px 20px 0;
//   width:140px;
//   height:30px;
//   display:flex;
//   margin-left:30px;
//   margin-bottom:20px
// }
:deep(.el-form-item__content){display: block;
}
:deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper){width: -webkit-fill-available;
}
.textarea{width: 94%;
}
.el-scrollbar:nth-of-type(2) {display: none !important;}
.el-time-spinner {text-align: center;
}</style>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

什么是埋点?前端如何埋点?

什么是埋点 “埋点” 是一种在应用程序或网站中插入代码的技术&#xff0c;用于收集用户行为数据或特定事件的信息。它是用于分析和监控用户行为、应用性能和其他关键指标的一种常用方法。通过在特定位置插入代码或调用特定的 API&#xff0c;开发人员可以捕获有关用户如何与应…

a,a,a【0】,a【0】,指针解析数组,用作(左值,右值)的区别

a&#xff0c;&a&#xff0c;a【0】&#xff0c;&a【0】&#xff0c;指针解析数组&#xff0c;用作&#xff08;左值&#xff0c;右值&#xff09;的区别

大数据-49 Redis 缓存问题中 穿透、雪崩、击穿、数据不一致、HotKey、BigKey

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

《GPT-4o mini:开启开发与创新的新纪元》

在科技发展的快速进程中&#xff0c;OpenAI 推出的 GPT-4o mini 模型如同一阵春风&#xff0c;给开发者们带来了新的希望和机遇。它以其卓越的性能和极具吸引力的价格&#xff0c;成为了行业内热议的焦点。 当我首次听闻 GPT-4o mini 的消息时&#xff0c;内心充满了好奇与期待…

解锁Conda配置的秘密:conda config --get命令全指南

&#x1f511; 解锁Conda配置的秘密&#xff1a;conda config --get命令全指南 Conda是一个功能强大的包管理器和环境管理器&#xff0c;它允许用户通过配置文件来自定义其行为。有时&#xff0c;了解当前的配置状态对于诊断问题、优化设置或确保环境的一致性至关重要。本文将…

Linux下学习Python包管理器Poetry教程 零基础入门到精通

Poetry [官网 - Poetry] https://python-poetry.org/ 安装 pip install poetry简单使用 初始化 poetry 项目 cd ~ && mkdir demo poetry init管理虚拟环境 poetry 预设了很多自己的虚拟环境配置&#xff0c;这些配置可以通过 poetry config 进行修改 当用户在执…

使用git工具管理泰山派内核源码目录及抽打补丁简易流程

目录 使用git工具管理泰山派内核源码目录及抽打补丁简易流程 一、使用git维护源码 二、git 常用的一些操作 三、抽补丁 四、打补丁 五、补充 使用git工具管理泰山派内核源码目录及抽打补丁简易流程 最近&#xff0c;在做linux开发的过程中入手了一块泰山派RK3566的开发板…

嵌入式初学-C语言-前言

概述 C语言是一种计算机编程语言&#xff0c;我们是利用代码来控制计算机的运行&#xff0c;从而达到某种目的&#xff0c;我们 就很有必要了解计算机的运行原理。 计算机组成 OS 应用程序 计算机硬件 基本组成&#xff1a; 输入设备&#xff1a;输入数据给计算机处理&…

详解Mysql InnoDB引擎 04

文章目录 1. InnoDB 简介2. 逻辑存储结构2.1 表空间 idb文件2.2 段2.3 区 1M2.4 页 16KB2.5 行 3. 架构3.1 内存结构3.1.1 Buffer Pool 缓冲池3.1.2 Change Buffer 更改缓冲区3.1.3 Adaptive Hash Index3.1.4 Log Buffer 3.2 磁盘结构 4. 后台线程5. 事务原理5.1 redo log 重做…

动态数据增强的艺术:Mojo模型的自定义应用

动态数据增强的艺术&#xff1a;Mojo模型的自定义应用 在机器学习和深度学习领域&#xff0c;数据增强是提升模型泛化能力的重要手段。Mojo模型&#xff0c;作为深度学习模型的一种封装形式&#xff0c;通常指的是通过训练得到的模型参数的集合&#xff0c;它能够被用于快速推…

运行python项目出现ModuleNotFoundError: No module named ‘sklearn‘问题

问题1&#xff1a;ModuleNotFoundError: No module named sklearn 1.WindowsR键&#xff0c;输入cmd&#xff0c;进入命令行窗口 2.安装sklearn&#xff0c;使用清华镜像安装&#xff1a; python -m pip install scikit-learn -i https://pypi.tuna.tsinghua.edu.cn/simple …

算法学习day22

一、函数的独占时间 给你一个进程数量&#xff0c;和运行日志。运行日志log的格式为:进程id:(start/end):运行时间 其中一个进程运行时可以被另一个优先级较高的进程抢占cpu。求每个进程独占cpu的时间。 输入&#xff1a;n 2, logs ["0:start:0","1:start:…

Spring Boot - 优雅实现支持通配符和IP段的IP访问黑白名单机制

文章目录 CodeIpAccessInterceptoraddInterceptor工具类配置文件 application.yml单元测试 Code 废话不多说&#xff0c;直接上码 IpAccessInterceptor package cn.cloud.bus.module.servicebus.framework.ipconfig;import cn.cloud.bus.module.servicebus.util.IpFilterUti…

深入理解计算机系统 CSAPP 家庭作业11.10

A: //home.html <form action"/cgi-bin/adder" method"GET"><ul><li><label for"n1">n1:</label><input type"text" id"n1" name"n1" /> //name的值决定页面提交后&#xf…

栈知识梳理和函数实现

参考此文章数据结构——栈&#xff0c;此文章写的更详细&#xff0c;由于我们都是学自于比特课程&#xff0c;这里做个自我备份&#xff0c;方便后续查阅、修改和补充。 栈知识梳理和函数实现 前言1.栈是什么&#xff1f;2.栈的接口实现2.1初始化栈2.2入栈2.3 出栈2.4 获取栈顶…

C语言图书信息管理系统

题目&#xff1a;图书信息管理系统 内容及主要功能描述&#xff1a; 该系统用于管理图书信息&#xff0c;包括图书的增加、删除、查找、修改、浏览、按出版社统计图书数量等功能。具体功能包括&#xff1a; 增加图书&#xff1a;输入图书信息并添加到系统中。删除图书&#x…

浅谈WebSerice

一. 什么是WebService Web Service也称为web服务&#xff0c;它是一种跨编程语言和操作系统平台的远程调用技术。Web Service采用标准的SOAP协议传输&#xff08;SOAP&#xff1a;Simple Object Access Protocol简单对象访问协议&#xff0c;soap属于w3c标准。并且soap协议是基…

C++ 算法:从基础到高级

C 算法&#xff1a;从基础到高级 C 是一种功能强大且高效的编程语言&#xff0c;广泛应用于系统编程、游戏开发、嵌入式系统以及高性能计算等领域。算法是程序设计的核心&#xff0c;掌握常用算法是成为优秀 C 程序员的必备技能。本文将介绍一些常用的 C 算法&#xff0c;从基…

【漏洞复现】phpStudy 小皮 Windows面板 存在RCE漏洞

靶场资料后台自行领取【靶场】 image-20240726092307252 PhpStudy小皮面板曝RCE漏洞&#xff0c;本质是存储型XSS引发。攻击者通过登录用户名输入XSS代码&#xff0c;结合后台计划任务功能&#xff0c;实现远程代码执行&#xff0c;严重威胁服务器安全。建议立即更新至安全版…

JAVA SE 类和对象

类和对象 类定义和使用类的定义格式 类的实例化什么是实例化 this 引用this引用的特性 对象的构造及初始化如何初始化对象构造方法概念特性 在这里插入图片描述 **注意**&#xff1a; 封装封装的概念封装扩展之包导入包中的类自定义包包的访问权限控制举例 static成员static修饰…