0.0.15 • Published 4 years ago
@retailwe/ui-period-selector v0.0.15
period-selector 时间段选择器
使用效果(参考图)
(/Users/sydzou/Library/Application Support/typora-user-images/image-20200716151447319.png)
使用方法
<!--- wxml文件 --->
<wr-period-selector bind:onConfirm="onSearch" show="{{show}}" bgColor="red" start="{{createTimeInterval[0]}}" end="{{createTimeInterval[1]}}" dayType="{{dayType}}" bind:onHide="billFilterHide" maxYearAfter="{{0}}" limitDay="{{365}}" />
// 脚本文件
Page({
data: {
dayType: 0,
createTimeInterval: [],
qid: false,
show: false,
},
onTap() {
this.setData({
show: true,
});
},
onSearch(e) {
const { createTimeInterval, showTime } = e.detail || {};
let cardTitle = '今日';
if (showTime === '时间段') {
cardTitle =
this.formatDate(createTimeInterval[0]) +
' - ' +
this.formatDate(createTimeInterval[1]);
} else if (showTime !== '') {
cardTitle = showTime + '数据';
}
this.setData({
cardTitle,
});
this.billFilterHide(); // 手动关闭弹窗
this.setData({ createTimeInterval });
},
billFilterHide() {
this.setData({
show: false,
});
},
formatDate(timestamp: number) {
if (!timestamp || typeof timestamp !== 'number') {
return '';
}
const date = new Date(Number(timestamp));
return (
date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
);
},
});
Props
参数 | 说明 | 要求 | 默认值 |
---|---|---|---|
limitDay | 限制范围时长 | Number | 默认-1,不限制 |
bgColor | 唯一入参‘red’红色卡片,不传为蓝色 | string | 卡片颜色 |
show | 显示隐藏 | boolean | false |
start | 时间段开始日期的时间戳 | 时间戳 | - |
end | 时间段结束日期的时间戳 | 时间戳 | - |
maxYearBefore | 最早可选时间相距年数 | Number | 5 |
maxYearAfter | 最晚可选时间相距年数 | Number | 5 |
dayType | 0:今天,1:近7日, 2:近30日 3:近3个月, 设置这个后初始化会覆盖start和end | Number | -1 |
Events
事件 | 说明 |
---|---|
onConfirm | 当确定按钮被点击时触发 |
onHide | 关闭回调 |
onReset | 关闭回调 , 默认重置初始值,可覆盖 |
onSelectTag | 点击时间标签回调 |
// onConfirm回调
{createTimeInterval: Array(2), showTime: "今日"}
外部样式类
样式类名 | 说明 |
---|---|
picker-wrapper-class | 根样式 |
active-label-class | 时间段标签被选择后的样式 |
datetime-range | 选择时间的样式 |
confirm-btn-class | 确认按钮的样式 |
reset-class | 重置的样式 |
picker-confirm-class | 日期选择器中确认按钮的样式 |
picker-cancel-class | 日期选择器中取消按钮的样式 |
注意⚠️:为使外部样式生效,其CSS属性最好以!important
声明。