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]
    },