1.只能选择今天之前的数据(今天及之后的数据置灰)

2.当选择了一个日期之后,则限制可选范围为前后一个月(不可选的置灰)

<el-date-picker
						class="w240 custom-date-picker"
						v-model="searchForm.timeRange"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
						type="daterange"
						range-separator="-"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						size="small"
						:clearable="false"

						@calendar-change="calendarChange"
						@visible-change="visibleChange"
						:disabled-date="disabledDate"
					/>

import dayjs from "dayjs";



//...



const searchForm = ref({
	timeRange: [
		dayjs(new Date()).subtract(29, "day").format("YYYY-MM-DD"),
		dayjs(new Date()).subtract(1, "day").format("YYYY-MM-DD")
	]
});

//-----------最多只能选择一个月,且只能选昨天之前的-----------------
const startVal = ref(null);
const calendarChange = e => {
	if (e[0] && !e[1]) {
		startVal.value = e[0];
	}
};

const visibleChange = e => {
	if (e) {
		startVal.value = null;
	}
};
const disabledDate = time => {
	const flag_yestodayAfter = dayjs(time).isAfter(dayjs().subtract(1, "day"), "day");
	if (!startVal.value) return flag_yestodayAfter;
	let range = [dayjs(startVal.value).subtract(30, "day"), dayjs(startVal.value).add(30, "day")];
	let cur = dayjs(time);
	return cur < range[0] || cur > range[1] || flag_yestodayAfter;
	// return dayjs(time).isAfter(dayjs().subtract(1, "day"), "day");
};
//-----------最多只能选择一个月,且只能选昨天之前的-----------------

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐