• Calendar calendar
    • 基本
    • 自定义内容
    • 自定义范围
    • Attributes
    • dateCell scoped slot 参数

    Calendar calendar

    显示日期

    基本

    Calendar 日历 - 图1

    设置 value 来指定当前显示的月份。如果 value 未指定,则显示当月。value 支持 v-model 双向绑定。

    1. <el-calendar v-model="value">
    2. </el-calendar>
    3. <script>
    4. export default {
    5. data() {
    6. return {
    7. value: new Date()
    8. }
    9. }
    10. }
    11. </script>

    自定义内容

    Calendar 日历 - 图2

    通过设置名为 dateCellscoped-slot 来自定义日历单元格中显示的内容。在 scoped-slot 可以获取到 date(当前单元格的日期), data(包括 type,isSelected,day 属性)。详情解释参考下方的 API 文档。

    1. <el-calendar>
    2. <!-- 这里使用的是 2.5 slot 语法,对于新项目请使用 2.6 slot 语法-->
    3. <template
    4. slot="dateCell"
    5. slot-scope="{date, data}">
    6. <p :class="data.isSelected ? 'is-selected' : ''">
    7. {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
    8. </p>
    9. </template>
    10. </el-calendar>
    11. <style>
    12. .is-selected {
    13. color: #1989FA;
    14. }
    15. </style>

    自定义范围

    Calendar 日历 - 图3

    设置 range 属性指定日历的显示范围。开始时间必须是周一,结束时间必须是周日,且时间跨度不能超过两个月。

    1. <el-calendar :range="['2019-03-04', '2019-03-24']">
    2. </el-calendar>

    Attributes

    参数说明类型可选值默认值
    value / v-model绑定值Date/string/number
    range时间范围,包括开始时间与结束时间。开始时间必须是周一,结束时间必须是周日,且时间跨度不能超过两个月。Array

    dateCell scoped slot 参数

    参数说明类型可选值默认值
    date单元格代表的日期Date
    data{ type, isSelected, day},type 表示该日期的所属月份,可选值有 prev-month,current-month,next-month;isSelected 标明该日期是否被选中;day 是格式化的日期,格式为 yyyy-MM-ddObject