ElementPlus Calendar 日歷

Calendar 日歷

顯示日期

基本

設(shè)置 value 來(lái)指定當(dāng)前顯示的月份。如果 value 未指定，則顯示當(dāng)月。value 支持 v-model 雙向綁定。

<template>
  <el-calendar v-model="value"> </el-calendar>
</template>

<script>
  export default {
    data() {
      return {
        value: new Date(),
      }
    },
  }
</script>

自定義內(nèi)容

通過(guò)設(shè)置名為 dateCell 的 scoped-slot 來(lái)自定義日歷單元格中顯示的內(nèi)容。在 scoped-slot 可以獲取到 date（當(dāng)前單元格的日期）, data（包括 type，isSelected，day 屬性）。詳情解釋參考下方的 API 文檔。

<template>
  <el-calendar>
  <template #dateCell="{data}">
    <p :class="data.isSelected ? 'is-selected' : ''">
      {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '??' :
      '' }}
    </p>
  </template>
</el-calendar>
</template>

<style>
  .is-selected {
    color: #1989fa;
  }
</style>

自定義范圍

設(shè)置 range 屬性指定日歷的顯示范圍。開(kāi)始時(shí)間必須是周起始日，結(jié)束時(shí)間必須是周結(jié)束日，且時(shí)間跨度不能超過(guò)兩個(gè)月。

<template>
  <el-calendar :range="[new Date(2019, 2, 4), new Date(2019, 2, 24)]">
</el-calendar>
</template>

自定義頭部

通過(guò)設(shè)置名為 header 的 scoped-slot 來(lái)自定義日歷頭部顯示的內(nèi)容。在 scoped-slot 可以獲取到 date（當(dāng)前單元格的日期）。詳情解釋參考下方的 API 文檔。

<template>
  <el-calendar ref="calendar">
  <template #header="{date}">
    <span>自定義頭部?jī)?nèi)容</span>
    <span>{{ date }}</span>
    <el-button-group>
      <el-button size="mini" @click="selectDate('prev-year')">上一年</el-button>
      <el-button size="mini" @click="selectDate('prev-month')"
        >上個(gè)月</el-button
      >
      <el-button size="mini" @click="selectDate('today')">今天</el-button>
      <el-button size="mini" @click="selectDate('next-month')"
        >下個(gè)月</el-button
      >
      <el-button size="mini" @click="selectDate('next-year')">下一年</el-button>
    </el-button-group>
  </template>
</el-calendar>
</template>

<script>
  export default {
    methods: {
      selectDate(value) {
        this.$refs.calendar.selectDate(value)
      },
    },
  }
</script>

國(guó)際化

默認(rèn)語(yǔ)言是英語(yǔ) (English), 如需使用其他語(yǔ)言, 請(qǐng)參考 國(guó)際化

注意：時(shí)間日期相關(guān)的語(yǔ)言配置如 (月份名, 每周第一天是周幾等) 也是在國(guó)際化里配置。

Attributes

dateCell scoped slot 參數(shù)

Methods