@mas.io/mas-calendar NPM

安装

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