el-calendar详解

el-calendar 是 Element Plus 框架中的日历组件，用于在页面中显示日期选择器。它常用于日期选择、日程安排等场景。

el-calendar 属性详解

1. model-value / value:

   • 类型: Date | String | Number
   • 用途: 当前选中的日期。
   • 默认值: —

2. range:

   • 类型: Array
   • 用途: 当前选中的日期范围。
   • 默认值: —

3. disabled-date:

   • 类型: Function
   • 用途: 设置不可选中的日期。
   • 默认值: —

4. first-day-of-week:

   • 类型: Number
   • 用途: 每周的第一天。
   • 默认值: 1（周一）

5. cell-class-name:

   • 类型: Function
   • 用途: 自定义单元格的类名。
   • 默认值: —

6. shortcuts:

   • 类型: Array
   • 用途: 快捷选项。
   • 默认值: —

el-calendar 事件详解

1. change:

   • 类型: Function
   • 用途: 当选中的日期改变时触发。
   • 参数: date（选中的日期）

2. date-cell-click:

   • 类型: Function
   • 用途: 当点击日期单元格时触发。
   • 参数: date（选中的日期），cellData（单元格数据）

el-calendar 插槽详解

1. default:

   • 插槽名称: default
   • 用途: 自定义日历的内容。

2. header:

   • 插槽名称: header
   • 用途: 自定义日历头部的内容。

完整示例代码

<template>
  <div>
    <h2>Calendar 示例</h2>

    <!-- 基本用法 -->
    <el-calendar v-model="selectedDate">
    </el-calendar>

    <!-- 自定义每周第一天 -->
    <el-calendar v-model="selectedDate" :first-day-of-week="0">
    </el-calendar>

    <!-- 禁用特定日期 -->
    <el-calendar v-model="selectedDate" :disabled-date="disabledDate">
    </el-calendar>

    <!-- 自定义单元格类名 -->
    <el-calendar v-model="selectedDate" :cell-class-name="cellClassName">
    </el-calendar>

    <!-- 快捷选项 -->
    <el-calendar v-model="selectedDate" :shortcuts="shortcuts">
    </el-calendar>

    <!-- 自定义内容 -->
    <el-calendar v-model="selectedDate">
      <template #dateCell="{ date, data }">
        <div :class="data.cellClassName">
          <span>{{ data.day.split('-').slice(1).join('-') }}</span>
          <span v-if="data.isSelected">今天</span>
        </div>
      </template>
    </el-calendar>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const selectedDate = ref(new Date())

const disabledDate = (time) => {
  return time.getTime() > Date.now()
}

const cellClassName = ({ cellDate, rowIndex, columnIndex }) => {
  if (cellDate.getDay() === 0) {
    return 'sunday'
  }
  return ''
}

const shortcuts = [
  {
    text: '今天',
    value: new Date(),
  },
  {
    text: '昨天',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: '一周前',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]

const handleDateCellClick = (date, cellData) => {
  ElMessage({
    message: `点击了日期：${date.toDateString()}`,
    type: 'success'
  })
}
</script>

代码解释

1. 基本用法:

   • 使用 el-calendar 组件并设置 v-model 绑定当前选中的日期。

   • <el-calendar v-model="selectedDate">
     </el-calendar>
     

2. 自定义每周第一天:

   • 使用 first-day-of-week 属性设置每周的第一天为周日。

   • <el-calendar v-model="selectedDate" :first-day-of-week="0">
     </el-calendar>
     

3. 禁用特定日期:

   • 使用 disabled-date 属性设置不可选中的日期。

   • <el-calendar v-model="selectedDate" :disabled-date="disabledDate">
     </el-calendar>
     

4. 自定义单元格类名:

   • 使用 cell-class-name 属性自定义单元格的类名。

   • <el-calendar v-model="selectedDate" :cell-class-name="cellClassName">
     </el-calendar>
     

5. 快捷选项:

   • 使用 shortcuts 属性设置快捷选项。

   • <el-calendar v-model="selectedDate" :shortcuts="shortcuts">
     </el-calendar>
     

6. 自定义内容:

   • 使用默认插槽自定义日历的内容。

   • <el-calendar v-model="selectedDate">
       <template #dateCell="{ date, data }">
         <div :class="data.cellClassName">
           <span>{{ data.day.split('-').slice(1).join('-') }}</span>
           <span v-if="data.isSelected">今天</span>
         </div>
       </template>
     </el-calendar>
     

事件处理函数

• handleDateCellClick:

  • 处理日期单元格点击事件。

  • const handleDateCellClick = (date, cellData) => {
      ElMessage({
        message: `点击了日期：${date.toDateString()}`,
        type: 'success'
      })
    }