Calendar 日历
显示日期
基础用法
设置 value 来指定当前显示的月份。 如果 value 未指定，则显示当月。 value 支持 v-model 双向绑定。
自定义内容
通过设置名为 date-cell 的 scoped-slot 来自定义日历单元格中显示的内容。 在 scoped-slot 可以获取到 date（当前单元格的日期）, data（包括 type，isSelected，day 属性）。 详情解释参考下方的 API 文档。
2025 May
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
04-27 | 04-28 | 04-29 | 04-30 | 05-01 | 05-02 | 05-03 |
05-04 | 05-05 | 05-06 | 05-07 | 05-08 | 05-09 | 05-10 |
05-11 | 05-12 | 05-13 | 05-14 | 05-15 | 05-16 | 05-17 |
05-18 | 05-19 | 05-20 | 05-21 | 05-22 | 05-23 | 05-24 |
05-25 | 05-26 | 05-27 | 05-28 | 05-29 | 05-30 | 05-31 |
范围
设置 range 属性指定日历的显示范围。 开始时间必须是周起始日，结束时间必须是周结束日，且时间跨度不能超过两个月。
自定义日历头部
Custom header content2025 May
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
27 | 28 | 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 |
国际化
由于 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'源代码
贡献者
