This question is very strange, but also very detailed, record it;
There is such a demand scenario. That is, the date picker component of el-date-picker adds a mark to a certain day based on the returned data of a certain day, but the panel-change event has no effect (panel-change event-triggered when the date panel changes) Effect diagram
:
Encountered a pit here, panel-change has no effect? ? Trigger does not respond. There is little information about the panel-change event on the Internet, so I suspect a problem with the version of element plus. Sure enough, see the picture:
The blue mark part is to add a panel change event, which means that this panel-change event is only added in version 1.3.0-bate.6 and above. I found that my element plus is 1.2.0-bate.2, and I can upgrade it. up. After all, I went to see other people's update logs. Hey...
So, sometimes it is these hidden problems, you need to read the version. . This card has been stuck all afternoon, record it, people are a little numb
Explanation: The panel-change event is triggered by switching the year and month navigation on the date panel.
Finally, the sample implementation code is attached:
there are some comment items in it, remember to pay more attention to it. I provide some examples here. For more comprehensive attributes, go to the official website; record it, record it, record it. . .
//html部分
<el-date-picker
v-model="day"
type="date"
placeholder="Pick a day"
format="YYYY/MM/DD"
value-format="YYYY-MM-DD"
@panel-change="changeTime"
teleported
>
<template #default="cell">
<div class="cell" :class="{ current: cell.isCurrent }">
<span class="text">{
{
cell.text }}</span>
<span v-if="isHoliday(cell)" class="holiday" />
</div>
</template>
</el-date-picker>
// css部分
//日历样式 主要设置红色标致的定位
.cell {
height: 30px;
padding: 3px 0;
box-sizing: border-box;
}
.cell .text {
width: 24px;
height: 24px;
display: block;
margin: 0 auto;
line-height: 24px;
position: absolute;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
}
.cell.current .text {
background: #626aef;
color: #fff;
}
.cell .holiday {
position: absolute;
width: 6px;
height: 6px;
background: var(--el-color-danger);
border-radius: 50%;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
}
// js部分
<script lang="ts" setup>
import {
ref, reactive, defineEmits } from "vue";
// 日期
const day = ref("");
//holidays 数组里面的格式要和下面的dayjs.format格式一致
//例如：["2022-11-2","2022-11-3","2022-11-4"]
const holidays = ref([]);
const isHoliday = ({
dayjs }) => {
return holidays.value.includes(dayjs.format("YYYY-M-D"));
};
// 切换日期组件导航按钮
//data为当前日期面板的时间，后面转成了时间戳
const changeTime = (date, mode, view) => {
const d = new Date(date);
const params = {
year: d.getFullYear(),
month: d.getMonth() + 1,
};
calendar(params).then((res) => {
if (res.data.length > 0) {
holidays.value = [];
res.data.forEach((item) => {
holidays.value.push(
d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + item.day
);
});
}
});
};