The start time of the el-date-picker time component packaging requirements is 00:00:00 and the end time is 23:59:59. The two parameters that need to be passed in the backend are the start time and the end time

el-date-picker time component package

need

The start time is 00:00:00 and
the end time is 23:59:59.
The backend needs to pass the two parameters start time and end time

Structural code - setting: default-time attribute, binding event 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>

The data obtained by two-way binding after script code time selection is in the form of an array [{2022-09-15 00:00:00}, {2022-09-17 23:59:59}],
corresponding to the data to be retrieved by the backend Parameters - start time availableStartTime and - end time availableEndTime

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

Edit the echo data code After getting the interface data, directly add it to the array

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

The method code corresponds to the start and end time respectively through the index from availableTime

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