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);

实现类：

    @Override
    public 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-picker
          v-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 = timestamp
  formData.value.meetingEndTime = timestamp2
  formData.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-form
      ref="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-picker
          v-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 = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      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 = timestamp
  formData.value.meetingEndTime = timestamp2
  formData.value.time = [dateFormat(timestamp),dateFormat(timestamp2)]

}
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as ParentMeetingVO
    if (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>