日期范围选择# 关于Antd-RangePicker的 开始结束联动限制
代码中需求是限制-开始和结束区间为2个月内,dayjs条件可灵活更改为,区间为年月日,数值改为想要的数量即可
onOpenChange方法,可用于多个日期选择器使用
<a-range-picker v-model:value="plannedSettleTimeAll" :disabled-date="disabledDate" value-format="YYYY-MM-DD" class="width-picker" @calendarChange="calendarPriceRangeChange" @openChange="onOpenChange($event,plannedSettleTimeAll)" />
const selectCurrentDate = ref([]);
function onOpenChange(val,e) {
if (val) {
selectCurrentDate.value = e
}
}
function calendarPriceRangeChange(date,val,rang) {
if (date && date.length >= 1) {
if (rang.range === 'start') {
selectCurrentDate.value = [date[0]]
}
if (rang.range === 'end') {
selectCurrentDate.value = [date[0],date[1]]
}
} else {
selectCurrentDate.value = null
}
}
function disabledDate(current) {
if (!selectCurrentDate.value) {
return false; // 开始和结束日期都未选则所有日期都可选
}
// 如果优先选择开始日期,利用dayjs的diff计算可选日期和开始时间的差值,返回boolean类型
const tooLate = selectCurrentDate.value[0] && dayjs(current).diff(selectCurrentDate.value[0], 'months') >= 2
// 如果优先选择结束日期,利用dayjs的diff计算可选日期和开始时间的差值,返回boolean类型
const tooEarly = selectCurrentDate.value[1] && dayjs(selectCurrentDate.value[1]).diff(current, 'month') >= 2
return !!tooEarly || !!tooLate;
}