常用于显示日期
1.如何使用?
/* 设置 value 来指定当前显示的月份。如果 value 未指定,则显示当月。
* value 支持 v-model 双向绑定。
*/
<el-calendar v-model="value">
</el-calendar>
<script>
export default {
data() {
return {
value: new Date()
}
}
}
</script>
2.自定义内容
//通过设置名为 dateCell 的 scoped-slot 来自定义日历单元格中显示的内容。
//在 scoped-slot 可以获取到 date(当前单元格的日期), data(包括 type,isSelected
//,day 属性)。详情解释参考下方的 API 文档。
<el-calendar>
<!-- 这里使用的是 2.5 slot 语法,对于新项目请使用 2.6 slot 语法-->
<template
slot="dateCell"
slot-scope="{date, data}">
<p :class="data.isSelected ? 'is-selected' : ''">
{{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
</p>
</template>
</el-calendar>
<style>
.is-selected {
color: #1989FA;
}
</style>
3.自定义范围
//设置 range 属性指定日历的显示范围。开始时间必须是周起始日,
//结束时间必须是周结束日,且时间跨度不能超过两个月。
<el-calendar :range="['2019-03-04', '2019-03-24']">
</el-calendar>