Calendar 日历
显示日期
基础用法
设置 value 来指定当前显示的月份。 如果 value 未指定，则显示当月。 value 支持 v-model 双向绑定。
自定义内容
通过设置名为 date-cell 的 scoped-slot 来自定义日历单元格中显示的内容。 在 scoped-slot 可以获取到 date（当前单元格的日期）, data（包括 type，isSelected，day 属性）。 详情解释参考下方的 API 文档。
2025 April
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
03-30 | 03-31 | 04-01 | 04-02 | 04-03 | 04-04 | 04-05 |
04-06 | 04-07 | 04-08 | 04-09 | 04-10 | 04-11 | 04-12 |
04-13 | 04-14 | 04-15 | 04-16 | 04-17 | 04-18 | 04-19 |
04-20 | 04-21 | 04-22 | 04-23 | 04-24 | 04-25 | 04-26 |
04-27 | 04-28 | 04-29 | 04-30 | 05-01 | 05-02 | 05-03 |
范围
设置 range 属性指定日历的显示范围。 开始时间必须是周起始日，结束时间必须是周结束日，且时间跨度不能超过两个月。
自定义日历头部
Custom header content2025 April
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
30 | 31 | 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 | 1 | 2 | 3 |
国际化
由于 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 |
暴露
| 名称 | 说明 | 类型 |
|---|---|---|
| selectedDay | 当前已选日期 | object |
| pickDay | 选择一个具体日期 | Function |
| selectDate | 选择日期 | Function |
| calculateValidatedDateRange | 根据开始与结束日期计算验证日期范围 | Function |
类型声明
Show declarations
ts
type CalendarDateType =
| 'prev-month'
| 'next-month'
| 'prev-year'
| 'next-year'
| 'today'源代码
贡献者
