一、思路
利用组件的picker-options(object)属性以及属性下的disabledDate和onPick来实现选择日期范围跨度设置。
二、代码实现
设置选择范围跨度为一年:
<template>
<div class="dy-page">
<el-date-picker
v-model="timeRange"
range-separator="至"
start-placeholder="开始月份"
end-placeholder="结束月份"
type="monthrange"
format="yyyy-MM"
value-format="yyyy-MM"
:picker-options="pickerOptions">
>
</el-date-picker>
</div>
</template>
<script>
export default {
data () {
return {
timeRange: [],
pickerMinDate: null,
pickerRange: 3600 * 1000 * 24 * 365, // 可选择日期范围(一年)
pickerOptions: {
onPick: ({ maxDate, minDate }) => {
if (minDate && this.pickerMinDate) {
this.pickerMinDate = null
} else if (minDate) {
this.pickerMinDate = minDate.getTime()
}
},
disabledDate: (time) => {
if (this.pickerMinDate) {
return (time.getTime() > (this.pickerMinDate + this.pickerRange)) || (time.getTime() < (this.pickerMinDate - this.pickerRange))
}
return false
}
}
}
}
}
</script>
类似的,想要设置选择范围跨度为30天、7天,只需要修改下上述代码中的pickerRange,即:
30天:
pickerRange: 3600 * 1000 * 24 * 30 // 可选择日期范围
7天:
pickerRange: 3600 * 1000 * 24 * 7 // 可选择日期范围
本文完,记录于2022-10-19.