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