vue3+elementplus的el-date-picker自定义内容设置如下,利用插槽:
<el-date-picker
v-model="searchVal2"
value-format="YYYY-MM-DD"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
:shortcuts="shortcuts"
>
<template #default="cell">
<div class="cell" :class="{ current: cell.isCurrent }">
<span class="text">{{ cell.text }}</span>
<span v-if="isHoliday(cell)" class="holiday">大</span>
</div>
</template>
</el-date-picker>
js:
const searchVal2 = ref("");
const shortcuts = [
{
text: "上周",
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
},
},
{
text: "上个月",
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end];
},
},
{
text: "过去3个月",
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end];
},
},
];
const holidays = ["2023-06-01", "2023-06-06", "2023-07-06"];
const isHoliday = ({ dayjs }) => {
return holidays.includes(dayjs.format("YYYY-MM-DD"));
};
效果图如下: