安装

tnpm install --save @alipay/mas-calendar

组件介绍

行业小程序日历组件，参考开源社区中的日历实现，结合mini-antui的日历样式，针对支付宝行业的各个不同场景进行定制化开发，满足业务需求。

参数说明

常规日历组件

| | 参数名称 | 填写要求 | 参数类型 | 参数说明 | 默认值 | 示例 | | --------------- | -------- | -------- | --------------------------------------------------------------------------------------------------------------- | -------- | ------ | ---- | | insert | 必填 | Boolean | 日历是否插入到对应的页面节点中 | true | - | | lunar | 选填 | Boolean | 是否开启阴历日期 | false | - | | range | 选填 | Boolean | 是否支持范围选择 | false | - | | showHeader | 选填 | Boolean | 是否显示日历头部，包括月切换和星期的日期 | true | - | | showMonth | 选填 | Boolean | 是否显示月份背景 | true | - | | hideDisableItem | 选填 | Boolean | 是否展示disable状态的日期，超出当前月或者maxDay的范围都标记为disable状态，默认行为将disable状态的元素的样式修改 | false | - | | showToday | 选填 | Boolean | 是否展示"今天"标识 | true | - | | itemWidth | 选填 | String | 日历中每个日期元素的宽度 | '' | - | | itemHeight | 选填 | String | 日历中每个日期元素的高度 | '' | - | | maxDay | 选填 | Number | 月份中最大的数值，小于该值的定位disable状态 | 31 | - | | onChange | 选填 | function | 日期更改的回调函数 | - | - | | onMonthChange | 选填 | function | 月份按钮更改日历月份的回调函数 | - | - | | showChangeBtn | 选填 | Boolean | 是否显示时间切换按钮 | true | - | | showWeek | 选填 | Boolean | 是否展示周信息 | true | - | | showBackToday | 选填 | Boolean | 是否展示返回今天按钮 | true | - | | date | 选填 | String | 年-月-日，默认选中时间 | - | - | | startDate | 选填 | String | 年-月-日，限定选择的范围：起始时间 | - | - | | endDate | 选填 | String | 年-月-日，限定选择的范围：结束时间 | - | - | | disableDates | 选填 | Array | 需要禁用的日期列表，形如: ['yyyy-mm-dd'], 支持props到ui层的更新 | - | - | | customerHoliday | 选填 | Object | 设置假期数据内容，必须在创建时候传入，暂不支持动态修改，数据示例如下文，支持props到ui层的更新 | - | - | | tags | 选填 | Array | 设置日历中每个日期下面的说明文案，优先级高于lunar的文案显示，| - | [{ date: '2021-01-01', text: '信息' }] |

跨月度日历选择列表

| 参数名称 | 填写要求 | 参数类型 | 参数说明 | 默认值 | 示例 | | -------- | -------- | -------- | -------- | ------ | ---- | | startDate | 选填 | String | 日历列表的开始时间，以string格式为准 | - | - | | endDate | 选填 | String | 日历列表的结束时间，以string格式为准 | - | - | | date | 选填 | String | 年-月-日，默认选中时间 | - | - | | onChange | 选填 | String | 更改日期选择的回调 | - | - | | customerHoliday | 选填 | Object | 设置假期数据内容，必须在创建时候传入，暂不支持动态修改，数据示例如下文 | - | - | | range | 选填 | Boolean | 设置日历列表是否 | false | 回调返回值为{ before: 'yyyy-mm-dd', after: 'yyyy-mm-dd'} | | initialRange | 选填 | Object | 设置初始选择的起止时间 | { startDate: '', endDate: '' } | { startDate: '2021-01-01', endDate: '2021-01-05' } |

{
  2020: [
    ...
    {
      "name": "春节",
      "range": ["2020-01-19"],
      "type": "workingday"
    },
    {
      "name": "春节",
      "range": ["2020-01-24", "2020-01-30"],
      "type": "holiday"
    },
    {
      "name": "春节",
      "range": ["2020-02-01"],
      "type": "workingday"
    }
    ...
  ]
}

跨月度日历选择列表

DEMO预览 在 page.json 文件中添加组件依赖

{
  "usingComponents": {
    "mas-calendar-list": "@alipay/mas-calendar/es/mode/list/index"
  }
}

在 page.axml 中引用组件

<!-- 常规日历组件在页面使用方式 -->
  <mas-calendar-list 
    startDate="2020-04-08"
    endDate="2020-07-09"
    onChange="onChange"
  />

常规日历组件使用方式

DEMO预览 在 page.json 文件中添加组件依赖

{
  "usingComponents": {
    "mas-calendar": "@alipay/mas-calendar/es/index",
  }
}

在 page.js 中配置日历组件日期选择变化的回调函数， onChange，返回日期相关的参数

Page({
  data: {
   
  },
  onChange (e) {
    console.log(e);
  }
});

样式覆盖推荐方式说明

可以通过在外层的view上套一个class来增加内部元素的样式优先级，达到样式覆盖的目的例如

.custom-calendar-container {
  display: flex;
  align-items: center;
  justify-content: center;
  .mas-calendar {
    width: 700rpx;

    .mas-calendar-item__weeks-box {
      height: 100rpx;
    }
  }
}

Badges