Calendar 日历
显示日期
基础用法
设置 value
来指定当前显示的月份。 如果 value
未指定,则显示当月。 value
支持 v-model
双向绑定。
自定义内容
通过设置名为 date-cell
的 scoped-slot
来自定义日历单元格中显示的内容。 在 scoped-slot
可以获取到 date(当前单元格的日期), data(包括 type,isSelected,day 属性)。 详情解释参考下方的 API 文档。
2024 October
Sun | Mon | Tue | Wed | Thu | Fri | Sat |
---|---|---|---|---|---|---|
09-29 | 09-30 | 10-01 | 10-02 | 10-03 | 10-04 | 10-05 |
10-06 | 10-07 | 10-08 | 10-09 | 10-10 | 10-11 | 10-12 |
10-13 | 10-14 | 10-15 | 10-16 | 10-17 | 10-18 | 10-19 |
10-20 | 10-21 | 10-22 | 10-23 | 10-24 | 10-25 | 10-26 |
10-27 | 10-28 | 10-29 | 10-30 | 10-31 | 11-01 | 11-02 |
范围
设置 range
属性指定日历的显示范围。 开始时间必须是周起始日,结束时间必须是周结束日,且时间跨度不能超过两个月。
自定义日历头部
Custom header content2024 October
Sun | Mon | Tue | Wed | Thu | Fri | Sat |
---|---|---|---|---|---|---|
29 | 30 | 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 |
国际化
由于 Element Plus 的默认语言为英语,如果你需要设置其它的语言,请参考国际化文档。
要注意的是:日期相关的文字(月份,每一周的第一天等等)也都是通过国际化来配置的。
API
Attributes
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
model-value / v-model | 选中项绑定值 | Date | — |
range | 时间范围,包括开始时间与结束时间。 开始时间必须是周起始日,结束时间必须是周结束日,且时间跨度不能超过两个月。 | array | — |
Slots
插槽名 | 说明 | 类型 |
---|---|---|
date-cell | type 表示该日期的所属月份,可选值有 prev-month、current-month 和 next-month;isSelected 标明该日期是否被选中;day 是格式化的日期,格式为 yyyy-MM-dd ;date 是单元格的日期 | object |
header | 卡片标题内容 | object |