本文实现基于Ant Design Vue@1.7.8版本，其他版本可参考思路
设计需求
选择范围日期，满足条件如下
- 只能选择今天之前的时间
- 时间范围最大选择31天
代码实现
废话不多说，直接上代码，demo代码实现如下：
<template>
<div id="app">
<a-range-picker
v-model="value"
:valueFormat="NORMAL_DATE"
:disabledDate="disabledFn"
@calendarChange="calendarChange"
/>
</div>
</template>
<script>
import dayjs from "dayjs";
const NORMAL_DATE = "YYYY-MM-DD";
export default {
name: "App",
data() {
return {
NORMAL_DATE,
disabledFn: this.disabledDate, // 动态更新disabled函数
value: []
};
},
methods: {
disabledDate(current) {
// 只能选择今天之前的时间
return !(current && current < dayjs().startOf("day"));
},
calendarChange([begin]) {
// 第一次选择的开始时间
begin = dayjs(begin, NORMAL_DATE);
// 开始时间前的第31天
const before31 = begin.add(-31, "day").endOf('day');
// 开始时间后的第31天
const end31 = begin.add(31, "day").startOf('day');
this.disabledFn = current => {
// 不在以下范围内的日期全部禁用
return !(
current &&
// 选择日期在今天之前
current < dayjs().startOf("day") &&
// 选择日期在开始时间前的第31天之后
current.valueOf() >= before31.valueOf() &&
// 选择日期在开始时间后的第31天之前
current.valueOf() <= end31.valueOf()
);
};
}
}
};
</script>
实现思路
由于 a-range-picker 组件提供的api有限，这里通过 calendarChange 事件来修改组件的禁用行为，实现的思路如下：
- 当选择开始时间，默认 disabledDate 的行为是，只能选择今天之前的时间
- 当选择结束时间，修改 disabledDate 的行为是，控制选择的时间范围在开始时间的31天之内，并且满足只能选择今天之前的时间
测试功能
- ✅已达标，选择开始时间，只能选择今天（3月1日）之前的日期
- ✅已达标，选择开始时间为1月20日，结束时间可选开始时间之前31天，边界为12月21日
- ✅已达标，选择开始时间为1月20日，结束时间可选开始时间之后31天，边界为2月19日
- ✅已达标，选择开始时间为2月10日，结束时间可选开始时间之前31天，边界为1月11日；可选开始时间之后31天，并且满足只能选择今天（3月1日）之前的日期，边界为2月28日
总结
通过组件提供的 calendarChange 动态修改组件的 disabledDate 函数属性，使得选择开始时间和结束时间的禁用的行为不一样，从而实现最终的需求。
