Calendar 日历
日历组件
使用指南
在 Taro 文件中引入组件
import { ZoCalendar } from '@lylb/tzo-ui'
组件依赖的样式文件（仅按需引用时需要）
@import '~@lylb/tzo-ui/dist/style/components/calendar.scss';
一般用法
<ZoCalendar />
跳转到指定日期
<ZoCalendar currentDate="2018/11/11" />
指定最小日期和最大日期
<ZoCalendar minDate="2018/1/1" maxDate="2018/10/1" />
标记时间
<ZoCalendar marks={[{ value: '2018/11/11' }]} />
禁止滑动
<ZoCalendar isSwiper="{false}" />
垂直滑动
<ZoCalendar isVertical />
范围选择
<ZoCalendarisMultiSelectcurrentDate={{ start: '2018/10/28', end: '2018/11/11' }}/>
有效时间组
<ZoCalendar validDates={[{ value: '2020/01/01' }]} />
ZoCalendar 参数
type DateArg = string | number | Dateinterface SelectDate {end?: DateArgstart: DateArg}
参数
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| currentDate | 当前的时间 | DateArg/ SelectDate | - | Date.now() |
| minDate | 最小的可选时间 | DateArg | - | - |
| maxDate | 最大的可选时间 | DateArg | - | - |
| isSwiper | 是否可以滑动 | boolean | - | true |
| marks | 需要标记的时间 | Array<{ value: DateArg }> | - | [] |
| validDates | 需要标记的有效时间 | Array<{ value: DateArg }> | - | [] |
| format | 日期格式 | string | - | YYYY-MM-DD |
| monthFormat | 月份格式 | string | - | YYYY 年 MM 月 |
| hideArrow | 是否隐藏箭头 | boolean | - | false |
| isVertical | 是否垂直滑动 | boolean | - | false |
| isMultiSelect | 是否范围选择 | boolean | - | false |
事件
| 事件名称 | 说明 | 返回参数 |
|---|---|---|
| onClickPreMonth | 点击箭头去上一个月的时候触发 () => void | - |
| onClickNextMonth | 点击箭头去下一个月的时候触发 () => void | - |
| onDayClick | 点击日期时候触发 (item: { value: string }) => void | item: { value: string } |
| onDayLongClick | 长按日期时触发 (item: { value: string }) => void | item: { value: string } |
| onMonthChange | 月份改变时触发 (value: string) => void | value: string |
| onSelectDate | 选中日期时候触发 (value: SelectDate) => void | value: SelectDate |