<group>
<calendar title="title" v-model="value"></calendar>
</group>
calendar只能在Group中使用
除了title和 value, 其他props和inline-calendar完全一致。
当绑定值为数组时,日历将为多选模式
API
Variables
属性
| 名字 | 类型 | 默认值 | 说明 | 版本要求 |
| value | string | 表单值, v-model 绑定。当值为空时,为单选;当值为[]时,为多选;设置值为'TODAY'可快捷选取当前日期。placeholder只有在值为空或[]时显示。 | -- | |
| title | string | label文字 | -- | |
| placeholder | string | 占位提示文字 | -- | |
| show-popup-header | boolean | 是否显示弹窗头部,当为多选时强制显示,单选时默认不显示 | v2.6.0 | |
| popup-header-title | string | 弹窗头部文字 | v2.6.0 | |
| display-format | function | 格式化显示值 | v2.6.4 | |
| readonly | string | 是否禁用弹窗选择 | v2.7.2 |
事件
| 名字 | 参数 | 说明 | 版本要求 |
| @on-change | (value) | 值改变时触发 | -- |
| @on-show | -- | 弹窗显示时触发 | -- |
| @on-hide | -- | 弹窗关闭时触发 | -- |
样式变量
| 名字 | 默认值 | 说明 | 继承自变量 |
| @calendar-arrow-color | #04BE02 | 前进后退的箭头颜色 | @theme-color |
| @calendar-highlight-color | #E59313 | 周末高亮的文本颜色 | |
| @calendar-selected-bg-color | #04BE02 | 选中时的背景颜色 | @theme-color |
| @calendar-disabled-font-color | #c0c0c0 | 禁用时的文本颜色 | |
| @calendar-today-font-color | #04BE02 | 今天的文本颜色 | @theme-color |
| @calendar-date-item-font-size | 16px | 单元格的字号 | |
| @calendar-bg-color | #fff | 背景颜色 | |
| @calendar-each-date-item-size | 26px | 日期单元格尺寸大小 | |
| @calendar-each-date-item-line-height | 25px | 日期单元格的行高 | |
| @calendar-header-day-item-color | #000 | 头部的文本颜色 |