支付寶小程序其他手勢(shì) 日歷·Calendar

單日歷組件。不支持跨頁選擇日期范圍。

掃碼體驗(yàn)

示例代碼

{
  "defaultTitle": "Calendar",
  "usingComponents":{
    "calendar": "mini-ali-ui/es/calendar/index"
  }
}

<view>
  <calendar
    type="range"
    haveYear="{{true}}"
    tagData="{{tagData}}"
    onSelect="handleSelect"
    onMonthChange="onMonthChange"
    onYearChange="onYearChange"
        onChange="onChange"
    onSelectHasDisableDate="onSelectHasDisableDate" />
</view>

Page({
  data: {
    tagData: [
      { date: '2020-02-14', tag: '顏色 1', tagColor: 1 },
      { date: '2020-02-28', tag: '公積金', tagColor: 2 },
      { date: '2020-02-24', tag: '顏色 3', tagColor: 3 },
      { date: '2020-02-18', tag: '顏色 4', tagColor: 4 },
      { date: '2020-02-4', tag: '還房貸', tagColor: 5 },
      { date: '2020-02-10', tag: '公積金', disable: true },
    ],
  },
  handleSelect() {},
  onMonthChange() {},
  onYearChange() {},
  onChange() {},
  onSelectHasDisableDate() {
    my.alert({
      content: 'SelectHasDisableDate',
    });
  },
});

屬性

Bug & Tip

• tagColor 共有 5 種顏色：
  • 1: #ff6010
  • 2: #00b578
  • 3: #ff8f1f
  • 4: #1677ff
  • 5: #999
• prevMonthDisable、prevYearDisable、nextvMonthDisable 以及 nextYearDisable 四個(gè)主要控制日歷上的箭頭是否可點(diǎn)擊使用，可根據(jù)實(shí)際業(yè)務(wù)場(chǎng)景來使用；
• tagData 中的 disable 是可選項(xiàng)，如某日期需要提示禁用不可點(diǎn)時(shí)才需要增加，當(dāng)不可用時(shí)，tag 以及 tagColor 將不會(huì)展示；
• 月份計(jì)數(shù)從 0 開始，即 0 代表 1 月份，以此類推，月份返回值 11 代表 12 月份。