使用el-date-picker 组件的 picker-options属性
当开始时间选择2022-11-04的时候,结束时间就不能选择之前的时间
代码部分
HTML
//开始日期
<el-date-picker
v-model="form.accidentDate"
type="date"
value-format="yyyy-MM-dd"
@change="startTimeStatus"
:picker-options="pickerOptionsStart"
placeholder="开始日期"
></el-date-picker>
//结束日期
<el-date-picker
v-model="form.closeDate"
type="date"
placeholder="结束日期"
value-format="yyyy-MM-dd"
@change="endTimeStatus"
:picker-options="pickerOptionsEnd"
></el-date-picker>
js
<script>
export default {
data() {
return {
pickerOptionsStart: {
disabledDate: time => {
let endDateVal = this.form.closeDate
if (endDateVal) {
return time.getTime() > new Date(endDateVal).getTime()
}
}
},
pickerOptionsEnd: {
disabledDate: time => {
let beginDateVal = this.form.accidentDate
if (beginDateVal) {
return time.getTime() < new Date(beginDateVal).getTime()
}
}
},
}
},
methods:{
// 时间开始选择器
startTimeStatus(value) {
this.form.accidentDate = value
},
// 时间结束选择器
endTimeStatus(value) {
this.form.closeDate = value
},
}
}
</script>