vue3 el-date-picker 日期控件最多选择一个月数据
2.当选择了一个日期之后,则限制可选范围为前后一个月(不可选的置灰)1.只能选择今天之前的数据(今天及之后的数据置灰)
·
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");
};
//-----------最多只能选择一个月,且只能选昨天之前的-----------------
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)