el-date-picker时间组件封装需求开始的时间都是00：00：00 结束的时间是23：59：59 后端需要传递的两个参数开始时间和结束时间

最新推荐文章于 2024-08-08 14:23:19 发布

麻瓜呀

最新推荐文章于 2024-08-08 14:23:19 发布

阅读量1.9k

点赞数

分类专栏： elementui Vue组件库使用文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_41421033/article/details/126857830

版权

Vue组件库使用同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

elementui

4 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue中封装el-date-picker时间组件，确保选择的起始时间为00:00:00，结束时间为23:59:59，并在选择后自动将时间范围转换为后端所需的开始和结束时间参数。通过设置default-time属性和handleStart方法，实现了时间选择的双向绑定和数据回显。

摘要由CSDN通过智能技术生成

el-date-picker时间组件封装

需求

开始的时间都是00：00：00
结束的时间是23：59：59
后端需要传递的两个参数开始时间和结束时间
在这里插入图片描述

结构代码 - 设置:default-time属性, 绑定事件handleStart

<el-form-item label="有效时间">
  <el-date-picker
    v-model="availableTime"
    class="date-input"
    type="daterange"
    range-separator="-"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    value-format="yyyy-MM-dd HH:mm:ss"
    format="yyyy-MM-dd HH:mm:ss"
    :default-time="['00:00:00', '23:59:59']"
    clearable
    @blur="handleStart"
/>
</el-form-item>

script代码时间选择后双向绑定拿到的数据, 数组形式[{2022-09-15 00:00:00},{2022-09-17 23:59:59}],
分别对应后端要拿的参数-开始时间 availableStartTime 和-结束时间availableEndTime

 data() {
 	return {
      availableTime: [], // 时间
      }

编辑回显数据代码拿到接口数据后, 直接加入到数组

created() {
      this.availableTime.push(this.form.availableStartTime, this.form.availableEndTime) // 回显时间区间
 }

方法代码从availableTime中通过索引分别对应开始和结束时间

methods: {
	handleStart() {
      this.form.availableStartTime = this.availableTime[0]
      this.form.availableEndTime = this.availableTime[1]
    },