安装
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
