Calendar 日历
显示日期
显示某一天
其他日期单位显示
显示一段时间
显示月份范围
默认显示值
自定义内容
显示日期时间
API
Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| model-value / v-model | 绑定值，如果它是数组，长度应该是 2 | enum | - | - |
| type | 显示类型 | string | enum | date |
| format | v-model 中数据的格式 | string | 时间格式 | YYYY-MM-DD |
| default-value | 可选，选择器打开时默认显示的时间 | Date / [Date, Date] | - | - |
| default-time | 范围选择时选中日期所使用的当日内具体时刻 | Date / [Date, Date] | - | - |
| value-format | 可选，绑定值的格式。 不指定则绑定值为 Date 对象 | string | 时间格式 | - |
| unlink-panels | 在范围选择器里取消两个日期面板之间的联动 | boolean | - | false |
| disabled-date | 一个用来判断该日期是否被禁用的函数，接受一个 Date 对象作为参数。 应该返回一个 Boolean 值 | function | - | - |
| shortcuts | 设置快捷选项，需要传入数组对象 | Array<{ text: string, value: Date / Function }> | - | - |
| cell-class-name | 设置自定义类名 | Function(Date) | - | - |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| change | 用户确认选定的值时触发 | (val: typeof v-model) |
| calendar-change | 如果用户没有选择日期，那默认展示当前日的月份。 你可以使用 default-value 来设置成其他的日期 | (val: [Date, Date]) |
| panel-change | 当日期面板改变时触发。 | (date, mode, view) |
Slots
| 插槽名 | 说明 |
|---|---|
| default | 自定义内容 |
类型定义
组件导出以下类型定义：
ts
import type { calendarPcProps, DateCell } from 'ryxon'主题定制
样式变量
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
| 名称 | 默认值 | 描述 |
|---|---|---|
| --r-calendar-text-color | var(--r-text-color-regular) | - |
| --r-calendar-off-text-color | var(--r-text-color-placeholder) | - |
| --r-calendar-header-text-color | var(--r-text-color-regular) | - |
| --r-calendar-icon-color | var(--r-text-color-primary) | - |
| --r-calendar-border-color | var(--r-disabled-border-color) | - |
| --r-calendar-inner-border-color | var(--r-border-color-light) | - |
| --r-calendar-inrange-bg-color | var(--r-border-color-extra-light) | - |
| --r-calendar-inrange-hover-bg-color | var(--r-border-color-extra-light) | - |
| --r-calendar-active-color | var(--r-primary-color) | - |
| --r-calendar-hover-text-color | var(--r-primary-color) | - |