需求:控制日期最多只能选择30天,所以当我选择其中一个日期后,第二个日期选择只能控制在前后30天(意思就是只有在选择了一个日期以后,我们才能确定剩下一个日期的选择范围)
代码如下:
<template>
<el-date-picker
@blur="datePickerBlur"
@change="datePickerChange"
v-model="time"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
>
</el-date-picker>
</template>
<script>
// 引入Day.js
import dayjs from 'dayjs'
// 前后需要的天数-1
const space = 29
// 所选的第一个日期
let _minDate = ''
export default {
name: 'home',
data() {
return {
// 选中时间段(默认是近一周)
time: [dayjs().subtract(6, 'day'), dayjs()],
pickerOptions: {
// 设置禁用状态
disabledDate: (time) => {
// 当选中第一个时间时
if (_minDate) {
// 最小时间
const min = dayjs(_minDate).subtract(space, 'day')
// 最大时间
const max = dayjs(_minDate).add(space, 'day')
return (
// 控制可以选择的时间范围
dayjs(time).isBefore(min) ||
dayjs(max).isBefore(time)
)
} else {
return false
}
},
// 选中日期后会执行的回调
onPick({ minDate }) {
_minDate = minDate
},
},
}
},
methods: {
// 时间 发生改变时
datePickerChange() {
// 判断时间段为null时 至空所选的第一个日期(目的是避免类型错误的报错)
if (!this.time) {
_minDate = ''
return
}
},
// 时间 失去焦点时
datePickerBlur() {
// 判断时间段不为null并且数组长度为0时 至空所选的第一个日期(目的是避免类型错误的报错)
if (this.time && this.time.length === 0) {
_minDate = ''
}
},
},
}
</script>
ps:dayjs
是一个轻量的处理时间和日期的 JavaScript 库(如不使用dayjs
也可以自己计算时间,比较麻烦)
教程:https://www.jianshu.com/p/15d6a9c1bf18