全部产品

Calendar 日历

日历。

注意:

  • 日历组件不支持跨月份选择日期范围。
  • 使用 onMonthChange 属性取值拿到选中的日期。

扫码体验

image.png

示例代码

// API-DEMO page/component/calendar/calendar.json
{
  "defaultTitle": "小程序AntUI组件库",
  "usingComponents":{
    "calendar": "mini-antui/es/calendar/index"
  }
}

<!-- API-DEMO page/component/calendar/calendar.axml -->
<view>
  <calendar
    type="range"
    haveYear="{{true}}"
    tagData="{{tagData}}"
    onSelect="handleSelect"
    onMonthChange="onMonthChange"
    onYearChange="onYearChange"
    onSelectHasDisableDate="onSelectHasDisableDate" />
</view>

// API-DEMO page/component/calendar/calendar.js
Page({
  data: {
    tagData: [
      { date: '2019-09-14', tag: '还房贷', tagColor: 5 },
      { date: '2019-09-28', tag: '公积金', tagColor: 2 },
      { date: '2019-09-18', tag: 'xx', disable: true },
    ],
  },
  handleSelect() {},
  onMonthChange() {},
  onYearChange() {},
  onSelectHasDisableDate() {
    my.alert({
      content: 'SelectHasDisableDate',
    });
  },
});

属性

属性名描述类型默认值必填
type选择类型 single: 单日 range: 日期区间。Stringsingle
haveYear是否展示年份控制箭头。Booleanfalsefalse
tagData标记数据,其中包括 日期:date,标记:tag,是否禁用:disable,标记颜色:tagColor,tagColor有4个可选值,1.#f5a911,2.#e8541e 3.#07a89b 4.#108ee9,5.#b5b5b5。Array<date, tag, tagColor>-
onSelect选择区间回调。([startDate, endDate]) => void-
onMonthChange点击切换月份时回调,带两个参数:currentMonth 切换后月份和 prevMonth 切换前月份。(currentMonth, prevMonth) => void-
onSelectHasDisableDate选择区间包含不可用日期。(currentMonth, prevMonth) => void-
onYearChange点击切换年份时回调,带两个参数:currentYear 切换后的年份和 prevYear 切换前的年份。。(currentYear, prevYear) => void-

说明:onYearChange 仅支持 mini-antui 0.4.32 以上版本。