日历
显示日期。
基础用法
设置 value 来指定当前显示的月份。 如果 value 未被指定，则显示当前月份。 value 支持双向绑定。
自定义内容
通过设置名为 date-cell 的 scoped-slot 来自定义日历单元格中显示的内容。 在 scoped-slot 中，你可以得到 date (当前单元格的日期), data (包括 type，isSelected，day attribute)。 更多详情，请参阅下面的 API 文档。
2025 八月
| 日 | 一 | 二 | 三 | 四 | 五 | 六 |
|---|---|---|---|---|---|---|
07-27 | 07-28 | 07-29 | 07-30 | 07-31 | 08-01 | 08-02 |
08-03 | 08-04 | 08-05 | 08-06 | 08-07 | 08-08 | 08-09 |
08-10 | 08-11 | 08-12 | 08-13 | 08-14 | 08-15 | 08-16 |
08-17 | 08-18 | 08-19 | 08-20 | 08-21 | 08-22 | 08-23 |
08-24 | 08-25 | 08-26 | 08-27 | 08-28 | 08-29 | 08-30 |
08-31 | 09-01 | 09-02 | 09-03 | 09-04 | 09-05 | 09-06 |
范围
设置 range 属性来指定日历的显示范围。 开始时间必须是周一，结束时间必须是周日，并且时间跨度不能超过两个月。
自定义表头
本地化
默认的区域设置为英文，如果你需要使用其他语言，请参考 国际化
注意，日期时间区域设置 (月份名称、每周第一天等) 也在本地化配置中。
API
属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 绑定值 | 日期 | — |
| 范围 | 时间范围，包括开始时间和结束时间。 开始时间必须是周的第一天，结束时间必须是周的最后一天，时间跨度不能超过两个月。 | array | — |
插槽
| 名称 | 描述 | 类型 |
|---|---|---|
| 日期单元格 | type 表示该日期属于哪个月，可选值为 prev-month、current-month、next-month；isSelected 表示该日期是否被选中；day 是格式化后的日期，格式为 YYYY-MM-DD；date 是单元格代表的日期 | object |
| header | 日历标题内容 | object |
暴露
| 名称 | 描述 | 类型 |
|---|---|---|
| 已选日期 | 当前选中日期 | object |
| 选中某天 | 选择一个特定日期 | Function |
| 选择日期 | 选择日期 | Function |
| 计算有效日期范围 | 根据开始和结束日期计算有效的日期范围 | Function |
类型声明
显示声明
ts
type CalendarDateType =
| 'prev-month'
| 'next-month'
| 'prev-year'
| 'next-year'
| 'today'来源
贡献者
