<a-range-picker
:allowClear="false"
v-model:value="formState.date"
:disabledDate="disabledDate"
@openChange="onOpenChange"
@calendarChange="onCalendarChange"
:show-time="{ format: 'HH:mm:ss' }"
format="YYYY-MM-DD HH:mm:ss"
valueFormat="YYYY-MM-DD HH:mm:ss"
:placeholder="['起始时间', '结束时间']"
style="width: 100%" />
const disabledDate = (current) => {
const currentDayjs = dayjs(current);
const now = dayjs();
const isTodayOrEarlier = currentDayjs.isSame(now, 'day') || currentDayjs.isBefore(now, 'day');
if (formState.date && formState.date.length === 2) {
const startDate = dayjs(formState.date[0]);
const endDate = dayjs(formState.date[1]);
if (formState.date[0]) {
const isInSameMonth = currentDayjs.month() === startDate.month();
const diffFromStart = currentDayjs.diff(startDate, 'day');
const isNotTooLate = !startDate.isValid() || diffFromStart <= 6;
return !isInSameMonth || !isTodayOrEarlier || !isNotTooLate;
}
else if (formState.date[1]) {
const isInSameMonth = currentDayjs.month() === endDate.month();
const diffFromEnd = currentDayjs.diff(endDate, 'day');
const isNotTooLate = !endDate.isValid() || (diffFromEnd >= -5 && diffFromEnd <= 0);
return !isInSameMonth || !isTodayOrEarlier || !isNotTooLate;
}
}
else {
return !isTodayOrEarlier;
}
};
const onOpenChange = (open) => {
if (open) {
formState.date = [];
}
};
const onCalendarChange = (val) => {
formState.date = val;
};