项目中有需求,选择起始日期后,结束日期不能选择起始日期之前;选择结束日期后,起始日期不能选择结束日期之前。
1.computed中定义两个方法,限制起始时间和结束时间
computed: {
endPicker () {
let startTimestamp = new Date(this.form.startTime)
return {
disabledDate (time) {
const timestamp = time.getTime()
// 结束时间不大于开始时间
if (timestamp > startTimestamp) {
return false
} else {
return timestamp <= startTimestamp
}
}
}
},
startPicker () {
let endTimestamp = new Date(this.form.endTime)
return {
disabledDate (time) {
const timestamp = time.getTime()
// 结束时间不小于开始时间
if (timestamp < endTimestamp) {
return false
} else {
return timestamp >= endTimestamp
}
}
}
}
}
2.使用。 :picker-options="startPicker/endPicker"
<el-form-item label="时间范围:"
prop="startTime">
<el-date-picker size="small"
value-format="yyyy-MM-dd"
type="date"
placeholder="起始日期"
:picker-options="startPicker"
style="width:45%"
v-model="form.startTime"></el-date-picker> -
<el-date-picker size="small"
value-format="yyyy-MM-dd"
type="date"
placeholder="结束日期"
:picker-options="endPicker"
style="width:45%"
v-model="form.endTime"></el-date-picker>
</el-form-item>