Skip to content

fix(Calendar): 修复 showConfirm 属性无效的问题 #1371

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

fix(Calendar): 修复 showConfirm 属性无效的问题 #1371

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 0 additions & 29 deletions src/calendar/calendar.wxml
View file
Open in desktop

This file was deleted.

142 changes: 89 additions & 53 deletions src/calendar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,17 @@ import rules from '../behaviors/rules';
import * as config from './config';
import formatFlags from './dete';

import { getDayByOffset, getDate, compareDay, calcDateNum, copyDates, getTime, formatMonthTitle, compareMonth, getMonths } from './util';
import {
getDayByOffset,
getDate,
compareDay,
calcDateNum,
copyDates,
getTime,
formatMonthTitle,
compareMonth,
getMonths
} from './util';

Component({
externalClasses: [
Expand All @@ -27,7 +37,7 @@ Component({
value: config.TYPE_SINGLE,
options: [config.TYPE_SINGLE, config.TYPE_MULTIPLE, config.TYPE_RANGE],
observer() {
this.setData({ currentDate: this.initCurrentDate() });
this.setData({currentDate: this.initCurrentDate()});
}
},
color: {
Expand All @@ -38,7 +48,7 @@ Component({
type: [String, Number, Date, Array],
value: '',
observer() {
this.setData({ currentDate: this.initCurrentDate() });
this.setData({currentDate: this.initCurrentDate()});
}
},
format: {
Expand Down Expand Up @@ -71,6 +81,7 @@ Component({
value: null
},
allowSameDay: Boolean,
// 是否显示确认按钮
showConfirm: {
type: Boolean,
value: true
Expand Down Expand Up @@ -99,6 +110,13 @@ Component({
}

},
observers: {
'showConfirm,type': function (showConfirm, type) {
if (!showConfirm && type === config.TYPE_MULTIPLE) {
console.error('多选模式下不可隐藏确认按钮，请将 showConfirm 设为 true 或者将 type 修改为非 multiple');
}
}
},
lifetimes: {
attached() {
this.setData({
Expand All @@ -119,37 +137,41 @@ Component({
scrollIntoViewIndex: ''
},
methods: {
clickDay(event) {
const { type, currentDate, maxLimitMessage, maxSelect, allowSameDay } = this.data;
const { date } = event.detail;
if(type === config.TYPE_SINGLE) {
/**
* 监听：点击具体某一天
* @param event
*/
onTapDay(event) {
const {type, currentDate, maxLimitMessage, maxSelect, allowSameDay} = this.data;
const {date} = event.detail;
if (type === config.TYPE_SINGLE) {
this.setData({
currentDate: getTime(date)
});
this.triggerEvent('linclickday', copyDates(date));
this.triggerEvent('linselect', copyDates(date));
}
if(type === config.TYPE_MULTIPLE) {
if (type === config.TYPE_MULTIPLE) {
let _index = null;
const isSelected = currentDate.some((item, index) => {
const res = compareDay(item, date) === 0;
if(res) {
if (res) {
_index = index;
}
return res;
});

if(isSelected) {
if (isSelected) {
// 取消选择
currentDate.splice(_index, 1);
this.setData({
currentDate: getTime(currentDate)
});
this.triggerEvent('linunselect', copyDates(currentDate));
} else {
if(maxSelect && currentDate.length >= maxSelect) {
if (maxSelect && currentDate.length >= maxSelect) {
wx.lin.showToast({
title: maxLimitMessage || `选择天数不能超过 ${ maxSelect } 天`
title: maxLimitMessage || `选择天数不能超过 ${maxSelect} 天`
});
this.triggerEvent('linclickday', copyDates(date));
return;
Expand All @@ -163,51 +185,78 @@ Component({
this.triggerEvent('linclickday', copyDates(date));
}

if(type === config.TYPE_RANGE) {
if (type === config.TYPE_RANGE) {
const [startDay, endDay] = currentDate;
if (startDay && !endDay) {
const compareToStart = compareDay(date, startDay);
if (compareToStart === 1) {
if(this.checkSelectRange([startDay, date])) {
if (this.checkSelectRange([startDay, date])) {
this.setData({
currentDate: getTime([startDay, date])
});
this.triggerEvent('linselect', copyDates([startDay, date]));
}
}
else if (compareToStart === -1) {
} else if (compareToStart === -1) {
// 选择结束日期在开始日期之前 重新开始选择
this.setData({
currentDate: getTime([date, null])
});
} else if(allowSameDay){
} else if (allowSameDay) {
this.setData({
currentDate: getTime([date, date])
});
}
}
else {
} else {
// 重新开始选择
this.setData({
currentDate: getTime([date, null])
});
}
}

// 如果隐藏确认按钮，则自动执行确认逻辑
const autoCollapseCalendar = (type === config.TYPE_SINGLE || type === config.TYPE_RANGE) && !this.data.showConfirm;
if (autoCollapseCalendar) {
this.onClickConfirm();
const that = this;
setTimeout(() => {
that.setData({
show: false
});
}, 500);
}
},

/**
* 监听：点击确认按钮
*/
onClickConfirm() {
const {format, type, currentDate} = this.data;
eventBus.emit(`lin-form-blur-${this.id}`, this.id);
let value = null;
if (type === 'single') {
value = format !== 'timestamp' ? formatFlags.format('yyyy-MM-dd', currentDate) : currentDate;
} else {
value = currentDate.map(item => {
return format !== 'timestamp' ? formatFlags.format('yyyy-MM-dd', item) : item;
});
}
this.triggerEvent('linconfirm', value);
},

checkSelectRange(date) {
const { maxSelect, maxLimitMessage, minSelect, minLimitMessage } = this.data;
const {maxSelect, maxLimitMessage, minSelect, minLimitMessage} = this.data;
if (maxSelect && calcDateNum(date) > maxSelect) {

wx.lin.showToast({
title: maxLimitMessage || `选择天数不能超过 ${ maxSelect } 天`
title: maxLimitMessage || `选择天数不能超过 ${maxSelect} 天`
});
return false;
}

if (minSelect && calcDateNum(date) < minSelect) {
wx.lin.showToast({
title: minLimitMessage || `选择天数不能少于 ${ minSelect } 天`
title: minLimitMessage || `选择天数不能少于 ${minSelect} 天`
});
return false;
}
Expand All @@ -217,53 +266,53 @@ Component({

initCurrentDate() {

const { type, minDate, defaultDate, maxDate } = this.data;
const {type, minDate, defaultDate, maxDate} = this.data;
const defaultDateIsArr = Array.isArray(defaultDate);

if (type === config.TYPE_SINGLE) {
if(!defaultDate) {
if (!defaultDate) {
return minDate;
}
if(defaultDateIsArr) {
if (defaultDateIsArr) {
return minDate;
}
if(compareDay(defaultDate, minDate) === -1) {
if (compareDay(defaultDate, minDate) === -1) {
return minDate;
}
if(compareDay(defaultDate, maxDate) === 1) {
if (compareDay(defaultDate, maxDate) === 1) {
return maxDate;
}
return defaultDate;
}

if(type === config.TYPE_MULTIPLE) {
if(!defaultDate) {
if (type === config.TYPE_MULTIPLE) {
if (!defaultDate) {
return [];
}
if(defaultDateIsArr) {
if (defaultDateIsArr) {
return defaultDate.filter(item => {
return compareDay(item, minDate) === 1 && compareDay(item, maxDate) === -1;
});
}
if(compareDay(defaultDate, minDate) === -1) {
if (compareDay(defaultDate, minDate) === -1) {
return [minDate];
}
if(compareDay(defaultDate, maxDate) === 1) {
if (compareDay(defaultDate, maxDate) === 1) {
return [maxDate];
}
return [minDate];
}

if(type === config.TYPE_RANGE) {
if(defaultDateIsArr) {
if (type === config.TYPE_RANGE) {
if (defaultDateIsArr) {
let [startDay = minDate, endDay] = defaultDate;
if(compareDay(startDay, minDate) === -1 || compareDay(startDay, maxDate) !== -1) {
if (compareDay(startDay, minDate) === -1 || compareDay(startDay, maxDate) !== -1) {
startDay = minDate;
}
if(!endDay) {
if (!endDay) {
endDay = getDayByOffset(getDate(startDay), 1).getTime();
}
if(compareDay(endDay, maxDate) === 1 || compareDay(endDay, minDate) === -1) {
if (compareDay(endDay, maxDate) === 1 || compareDay(endDay, minDate) === -1) {
endDay = getDayByOffset(getDate(startDay), 1).getTime();
}
return [
Expand All @@ -290,13 +339,13 @@ Component({
contentObserver.observe('.month', res => {
if (res.boundingClientRect.top <= res.relativeRect.top) {
// @ts-ignore
this.setData({ subTitle: formatMonthTitle(res.dataset.date) });
this.setData({subTitle: formatMonthTitle(res.dataset.date)});
}
});
},
scrollIntoView() {
setTimeout(() => {
const { currentDate, type, show, minDate, maxDate } = this.data;
const {currentDate, type, show, minDate, maxDate} = this.data;
const targetDate = type === 'single' ? currentDate : currentDate[0];
const displayed = show;
if (!targetDate || !displayed) {
Expand All @@ -305,7 +354,7 @@ Component({
const months = getMonths(minDate, maxDate);
months.some((month, index) => {
if (compareMonth(month, targetDate) === 0) {
this.setData({ scrollIntoViewIndex: `month${index}` });
this.setData({scrollIntoViewIndex: `month${index}`});
return true;
}
return false;
Expand All @@ -317,19 +366,6 @@ Component({
show: false
});
},
onClickConfirm() {
const {format, type, currentDate} = this.data;
eventBus.emit(`lin-form-blur-${this.id}`, this.id);
let value = null;
if(type === 'single') {
value = format !== 'timestamp' ? formatFlags.format('yyyy-MM-dd', currentDate) : currentDate;
} else {
value = currentDate.map(item => {
return format !== 'timestamp' ? formatFlags.format('yyyy-MM-dd', item) : item;
});
}
this.triggerEvent('linconfirm', value);
},
getValues() {
return this.data.currentDate;
},
Expand Down
31 changes: 26 additions & 5 deletions src/calendar/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,31 @@
<import src="./calendar.wxml" />
<wxs src="./index.wxs" module="computed"></wxs>

<l-popup content-align="bottom" show="{{ show }}" bind:lintap="closePicker">
<template
is="calendar"
data="{{ currentDate, type, color, defaultDate, format, formatter, minDate, maxDate, minSelect, maxSelect, showConfirm, confirmText, maxLimitMessage, minLimitMessage, showTitle, showSubtitle, title, subTitle, scrollIntoViewIndex, color }}"
/>
<view class="calendar-container">
<header showTitle="{{ showTitle }}" showSubtitle="{{ showSubtitle }}" title="{{ title }}" subTitle="{{ subTitle }}"></header>
<scroll-view class="calendar-body-wrap" scroll-y scroll-into-view="{{ scrollIntoViewIndex }}">
<mounth
wx:for="{{ computed.getMonths(minDate, maxDate) }}"
wx:key="index"
id="month{{ index }}"
class="month"
data-date="{{ item }}"
date="{{ item }}"
minDate="{{ minDate }}"
maxDate="{{ maxDate }}"
currentDate="{{ currentDate }}"
type="{{ type }}"
bind:clickDay="onTapDay"
showMonthTitle="{{ index !== 0 }}"
formatter="{{ formatter }}"
color="{{ color }}"
>
</mounth>
</scroll-view>
<view wx:if="{{showConfirm}}">
<l-button type="default" l-class="bottom-button" size="long" bind:lintap="onClickConfirm" bg-color="{{ color }}">{{confirmText}}</l-button>
</view>
</view>
</l-popup>

<l-toast></l-toast>