扫码体验Calendar日历,以及其示例代码-阿里云帮助中心

日历。

注意：

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

扫码体验

示例代码

// 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: 日期区间。	String	single	否
haveYear	是否展示年份控制箭头。	Boolean	false	false
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 以上版本。