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