element-plus的日历组件

element-plus的日历组件

实现功能：通过选择日期组件的月份，日历组件呈现对应月份。并通过其数据对日历中对应日期做出不同样式

• 首先是通过rang属性，设置日历组件的显示范围
• 之后发现设置rang属性后，其样式发生了改变。 上月及下月的日期显示在其中，且其样式为黑色（原先为淡灰色），不能有效区分当前月和其他月。所以我直接查看结构，通过css样式给其隐藏了（要查看你的渲染结构，有可能和我的不一致）
  

::v-deep .el-calendar-table{
	border-collapse:collapse
}
.is-selected {
  color: #1989fa;
}
/* 设置范围时 让上月及下月内容不显示 */
::v-deep .el-calendar-table:first-child tr:first-child .current{
	visibility: hidden;
}
::v-deep .el-calendar-table:nth-child(2) tr:last-child .next{
	visibility: hidden;
}

想要自定义日历单元格中的内容，需要使用date-cell插槽，可查看官方文档说明及案例
样式判断是根据日期进行的

<el-date-picker v-model="date" type="month" format="YYYY-MM" value-format="YYYY-MM-DD" placeholder="请选择" @change="changeDate" />
<el-calendar v-model="dateValue" :range="range" ref="calendar">
	<template #date-cell="{ data }">
		<p :class="[data.isSelected ? 'is-selected' : '', tempDateList[data.day]==1 ? 'abnormal' : tempDateList[data.day]==0 ? 'normal' : '']" 
		:style="data.day == nowDay ? {'color': '#409EFF'} : ''">  
			{{ data.day.split('-').slice(1).join('-') }}
			{{ data.isSelected ? '✔️' : '' }}
		</p>
	</template>
	<template #header>
		<span>日历</span>
	</template>
</el-calendar>

import moment from 'moment';
// 根据当前数据给对应日期添加不同类名（样式）
const tempDateList = ref({
	"2024-07-01": 1,
	"2024-07-02": 1,
	"2024-07-03": 0,
})
const dateValue = ref(); // 日历绑定值
const range = ref([new Date("2024-07-01"), new Date("2024-07-31")]); // 日历的显示范围
let nowDay = moment().format('YYYY-MM-DD'); // 当前日期  为了给当日添加样式

/* 日期组件改变时 */
const changeDate = async (val) => {
	let firstDay = moment(val).startOf('months').format('YYYY-MM-DD');
	let lastDay = moment(val).endOf('months').format('YYYY-MM-DD');
	range.value = [new Date(firstDay), new Date(lastDay)]; // 范围
}

// 监听日历绑定值改变时，请求接口
watch(
	dateValue,
	(val, v2)=>{
		console.log(val);
	}
)