Calendar 日历

显示日期

基础用法

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

2024 December
SunMonTueWedThuFriSat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4

自定义内容

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

2024 December
SunMonTueWedThuFriSat

12-01

12-02

12-03

12-04

12-05

12-06

12-07

12-08

12-09

12-10

12-11

12-12

12-13

12-14

12-15

12-16

12-17

12-18

12-19

12-20

12-21

12-22

12-23

12-24

12-25

12-26

12-27

12-28

12-29

12-30

12-31

01-01

01-02

01-03

01-04

范围

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

2019 March
SunMonTueWedThuFriSat
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

自定义日历头部

Custom header content2024 December
SunMonTueWedThuFriSat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4

国际化

由于 Element Plus 的默认语言为英语,如果你需要设置其它的语言,请参考国际化文档。

要注意的是:日期相关的文字(月份,每一周的第一天等等)也都是通过国际化来配置的。

API

Attributes

属性名说明类型默认值
model-value / v-model选中项绑定值Date
range时间范围,包括开始时间与结束时间。 开始时间必须是周起始日,结束时间必须是周结束日,且时间跨度不能超过两个月。array

Slots

插槽名说明类型
date-celltype 表示该日期的所属月份,可选值有 prev-month、current-month 和 next-month;isSelected 标明该日期是否被选中;day 是格式化的日期,格式为 yyyy-MM-dddate 是单元格的日期object
header卡片标题内容object

源代码

组件样式文档

贡献者