Calendar 日历

该组件提供日历选择功能（包括范围选择）

注意目前 h5 和 小程序 实现的方案不一致 可能导致效果不同 和 部分 API 无法使用 具体效果请看 h5 上的展示

使用指南

在 Taro 文件中引入组件

  1. import { AtCalendar } from “taro-ui”

组件依赖的样式文件（仅按需引用时需要）

  1. @import “~taro-ui/dist/style/components/calendar.scss”;

一般用法

  1. <AtCalendar />

跳转到指定日期

  1. <AtCalendar currentDate=“2018/11/11” />

指定最小日期和最大日期

  1. <AtCalendar minDate=“2018/1/1” maxDate=“2018/10/1” />

标记时间

  1. <AtCalendar marks={ [ { value: ‘2018/11/11‘ } ] } />

禁止滑动

  1. <AtCalendar isSwiper=“{false}” />

垂直滑动

  1. <AtCalendar isVertical />

范围选择

  1. <AtCalendar isMultiSelect currentDate={{start: ‘2018/10/28‘, end:
    ‘2018/11/11‘}}/>

AtCalendar 参数

  1. type DateArg = string | number | Date
    interface SelectDate {
      end?: DateArg
      start: DateArg
    }
参数说明类型默认值
currentDate当前的时间DateArg | SelectDateDate.now()
minDate最小的可选时间DateArg-
maxDate最大的可选时间DateArg-
isSwiper是否可以滑动booleantrue
marks需要标记的时间Array<{ value: DateArg }>[]
format日期格式stringYYYY-MM-DD
monthFormat月份格式stringYYYY年MM月
hideArrow是否隐藏箭头booleanfalse
isVertical是否垂直滑动booleanfalse
isMultiSelect是否范围选择booleanfalse

AtCalendar 事件

参数说明类型默认值
onClickPreMonth点击箭头去上一个月的时候触发() => void-
onClickNextMonth点击箭头去下一个月的时候触发() => void-
onDayClick点击日期时候触发(item: { value: string }) => void-
onDayLongClick长按日期时触发(item: { value: string }) => void-
onMonthChange月份改变时触发(value: string) => void-
onSelectDate选中日期时候触发(value: SelectDate) => void-