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>