Calendar 日历
显示日期。
基础用法
设置 value 指定当前显示的月份。 如果未指定 value，则显示当前月份。 value 支持双向绑定。
控制类型 2.13.1
你可以设置日历页眉控制器的类型。 当设置为 select 时，可以使用 formatter 来自定义 label。
自定义内容
通过设置名为 date-cell 的 scoped-slot 来自定义日历单元格中显示的内容。 在 scoped-slot 中，你可以获取 date（当前单元格的日期）、data（包括 type、isSelected、day 属性）。 详情请参考下方的 API 文档。
2026年 5月
| 日 | 一 | 二 | 三 | 四 | 五 | 六 |
|---|---|---|---|---|---|---|
04-26 | 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 | 06-01 | 06-02 | 06-03 | 06-04 | 06-05 | 06-06 |
范围
设置 range 属性来指定日历的显示范围。 开始时间必须是周一，结束时间必须是周日，且时间跨度不能超过两个月。
自定义页眉
本地化
默认的区域设置为英文，如果你需要使用其他语言，请参考 国际化
注意，日期时间区域设置 (月份名称、每周第一天等) 也在本地化配置中。
API
属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 绑定值 | 日期 | — |
| range | 时间范围，包括开始时间和结束时间。 开始时间必须是该周的第一天，结束时间必须是该周的最后一天，时间跨度不能超过两个月。 | array | — |
| controller-type 2.13.1 | 日历页眉控制器的类型 | 枚举 | button |
| formatter 2.13.1 | 当 controller-type 为 'select' 时格式化标签 | Function | — |
插槽
| 名称 | 描述 | 类型 |
|---|---|---|
| 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 |
类型声明
显示声明
ts
type CalendarDateType =
| 'prev-month'
| 'next-month'
| 'prev-year'
| 'next-year'
| 'today'来源
贡献者
