背景:
当使用antd组件库的a-range-picker组件时,有时候会对此组件在日期选择范围时进行限制,比如7天等。
实现逻辑:
实现代码:
html:
<a-range-picker v-model:value="searchTime" class="timeInput" @change="timeChange" :show-time="false" @calendarChange="onCalendarChange" :disabled-date="disabledDate"/>
js:
import { Dayjs } from 'dayjs';
type RangeValue = [Dayjs, Dayjs];
const dates = ref<RangeValue>();
const onCalendarChange = (val) => {
dates.value = val;
};
const disabledDate = (current: Dayjs) => {
if (!dates.value || dates.value.length === 0) {
return false;
}
const tooLate = dates.value[0] && current.diff(dates.value[0], 'days') > 365; // 日期可选范围是365天
const tooEarly = dates.value[1] && dates.value[1].diff(current, 'days') > 365;
return tooEarly || tooLate;
};
逻辑:
当日期发生变化时,触发了onCalendarChange方法,将获取到的值复制给dates,通过判断dates的日期是否满足disabledDate方法,此方法返回的是个布尔值,用于判断是否禁用。
html双向绑定的searchTime是日期组件显示的日期,和日期选择的这两个方法并无关联。
若有不到,请指正!