Calendar 日历

日历。

扫码体验：
Calendar 日历 - 图1

属性名描述类型默认值必选
type选择类型 single: 单日 range: 日期区间Stringsinglefalse
tagData标记数据，其中包括日期date，标记tag，是否禁用disable，标记颜色tagColor，tagColor有4个可选值，1.#f5a911，2.#e8541e 3.#07a89b 4.#108ee9，5.#b5b5b5Array<date, tag, tagColor>false
onSelect选择区间回调([startDate, endDate]) => voidfalse
onMonthChange点击切换月份时回调，带两个参数currentMonth切换后月份和prevMonth切换前月份(currentMonth, prevMonth) => voidfalse
onSelectHasDisableDate选择区间包含不可用日期(currentMonth, prevMonth) => voidfalse

示例

  1. {
  2.   "defaultTitle": "小程序AntUI组件库",
  3.   "usingComponents":{
  4.     "calendar": "mini-antui/es/calendar/index"
  5.   }
  6. }
  1. <view>
  2.   <calendar
  3.     type="single"
  4.     tagData="{{tagData}}"
  5.     onSelect="handleSelect" />
  6. </view>
  1. Page({
  2.   data: {
  3.     tagData: [
  4.       { date: '2018-05-14', tag: '还房贷', tagColor: 5 },
  5.       { date: '2018-05-28', tag: '公积金', tagColor: 2 },
  6.     ],
  7.   },
  8.   handleSelect() {},
  9.   onMonthChange() {},
  10. });

原文: https://docs.alipay.com/mini/component-ext/calendar