日历
显示日期。
基础用法
自定义内容
范围
自定义标题
本地化
默认的区域设置为英文,如果你需要使用其他语言,请参考 国际化
注意,日期时间区域设置 (月份名称、每周第一天等) 也在本地化配置中。
API
属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 绑定值 | 日期 | — |
| range | 时间范围,包括开始和结束时间。开始时间必须是周起始日,结束时间必须是周结束日,并且时间跨度不能超过两个月。 | array | — |
插槽
| 名称 | 描述 | 类型 |
|---|---|---|
| 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'