@mas.io/mas-date-range-selection NPM

安装

tnpm install --save @alipay/mas-date-range-selection

组件介绍

行业小程序日期区间选择组件，针对支付宝行业的各个不同场景进行定制化开发，满足业务需求。

参数说明

属性	必填	参数类型	参数说明	默认值	示例
---	---	---	---	---	--
show	必填｜ boolean	组件展示｜false ,
title	非必填	string	弹窗标题	'选择用车时间',
startTitle	非必填	string	开始tab标题	'借车时间',
endTitle	非必填	string	结束tab标题	'还车时间',
interval	非必填	number	分钟间隔	15,
range	非必填	number	起止时间范围,单位为月｜ 1,
current ｜必填｜ string	当前选中的tab,0为开始时间tab，1为结束时间tab	'',
defaultTime	非必填	array	默认时间，包含开始时间与结束时间｜ []

在小程序中使用

{
  "usingComponents": {
    "mas-date-range-selection": "@alipay/mas-date-range-selection/es/index"
  }
}

在 page.axml 中引用组件

<!-- 页面使用方式 -->
  <mas-date-range-selection show="{{show}}" 
    current="{{current}}" 
    range="{{range}}" 
    interval="{{interval}}" 
    defaultTime="{{defaultTime}}" 
    onCancel="onCancel" 
    onConfirm="onConfirm"
    onScroll="onScroll">
    <view slot="total" class="mas-date-total"></view>
  </mas-date-range-selection>

page.acss 中mas-mas-date-total样式

.mas-date-total { color:#333; font-size: 24rpx; text-align: center; height:24rpx; min-width: 72rpx; padding: 12rpx; background: #fff; border-radius: 24rpx; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

Badges

dayjs @mas.io/falcon-core

@infinitebrahmanuniverse/nolb-_mas @everything-registry/sub-chunk-583

1.0.5

3 years ago