Skip to content

Commit f97cc8b

Browse files
rayhomierayhomie
authored
Feat calendar format (#1230)
* fix: 修复钉钉小程序mixin传入null报错问题 * feat: Calendar日历在弹窗内时，需要禁用页面滚动 * feat: 新增onMonthFormatter函数 * feat: 新增onMonthFormatter函数
1 parent 3e4172c commit f97cc8b

File tree

24 files changed

+179
-40
lines changed

24 files changed

+179
-40
lines changed

‎compiled/alipay/demo/pages/Calendar/index.axml

+2-1
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,8 @@
5252
<view slot="content">
5353
<ant-calendar
5454
monthRange="{{ demo8.monthRange }}"
55-
onFormatter="{{ demo8Formatter ? demo8Formatter : 'demo8Formatter' }}" />
55+
onFormatter="{{ demo8Formatter ? demo8Formatter : 'demo8Formatter' }}"
56+
onMonthFormatter="{{ demo8MonthFormatter ? demo8MonthFormatter : 'demo8MonthFormatter' }}" />
5657
</view>
5758
</collapse-container>
5859

‎compiled/alipay/demo/pages/Calendar/index.js

+13-1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ function demo8Formatter(cell) {
1616
topClassName = isOdd ? 'odd' : 'even';
1717
}
1818
return {
19+
className: dayjs(cell.time).isAfter(dayjs().add(1, 'M'), 'd')
20+
? 'hidden'
21+
: '',
1922
top: {
2023
className: topClassName,
2124
label: isOdd ? '奇数' : '偶数',
@@ -25,6 +28,11 @@ function demo8Formatter(cell) {
2528
},
2629
};
2730
}
31+
function demo8MonthFormatter(month) {
32+
return {
33+
className: dayjs(month).isAfter(dayjs()) ? 'shrink' : '',
34+
};
35+
}
2836
function demoFormatter(cell, value) {
2937
if (Array.isArray(value) && value.length == 1) {
3038
const current = value[0];
@@ -72,7 +80,10 @@ Page({
7280
},
7381
demo8: {
7482
visible: true,
75-
monthRange: [new Date().getTime(), new Date().getTime()],
83+
monthRange: [
84+
dayjs().toDate().getTime(),
85+
dayjs().add(1, 'M').toDate().getTime(),
86+
],
7687
},
7788
demo9: {
7889
visible: true,
@@ -97,6 +108,7 @@ Page({
97108
},
98109
demoFormatter,
99110
demo8Formatter,
111+
demo8MonthFormatter,
100112
demo9HandleChange(value) {
101113
this.setData({
102114
'demo9.value': value,

‎compiled/alipay/demo/pages/Calendar/index.less

+10
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,13 @@ page {
2727
.even {
2828
color: blue;
2929
}
30+
31+
.ant-calendar-cell.hidden {
32+
opacity: 0;
33+
pointer-events: none;
34+
}
35+
36+
.ant-calendar-body-container.shrink {
37+
height: 100px;
38+
overflow: hidden;
39+
}

‎compiled/alipay/src/Calendar/helper.sjs

+3-2
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ function getClassName(value, index) {
1111
isRowEnd = value.isRowEnd,
1212
inThisMonth = value.inThisMonth,
1313
isToday = value.isToday,
14-
disabled = value.disabled;
14+
disabled = value.disabled,
15+
className = value.className;
1516
var classNames = {
1617
disabled: disabled,
1718
today: inThisMonth && isToday,
@@ -23,7 +24,7 @@ function getClassName(value, index) {
2324
hidden: !inThisMonth,
2425
'row-end': index % 7 === 6
2526
};
26-
var result = 'ant-calendar-cell';
27+
var result = "ant-calendar-cell ".concat(className || '');
2728
keys(classNames).forEach(function (key) {
2829
if (classNames[key]) {
2930
result += " ant-calendar-cell-".concat(key);

‎compiled/alipay/src/Calendar/index.axml

+2-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,8 @@
4747
a:for="{{ monthList }}"
4848
a:for-index="index"
4949
a:for-item="currentMonth">
50-
<view class="ant-calendar-body-container">
50+
<view
51+
class="ant-calendar-body-container {{ currentMonth.className || '' }}">
5152
<view class="ant-calendar-title-container">
5253
<slot name="calendarTitle">
5354
<view class="ant-calendar-title">{{ currentMonth.title }}</view>

‎compiled/alipay/src/Calendar/index.md

+1
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ toc: 'content'
3030
| weekStartsOn | 星期栏，以周几作为第一天显示。默认为 `Sunday` | `Sunday` \| `Monday` | `Sunday` |
3131
| onChange | 日期变化回调 | (date: CalendarValue) => void | 无 |
3232
| onFormatter | 用于设置单元格的自定义数据 | (cell: CellState, currentValue: CalendarValue) => CellState | 无 |
33+
| onMonthFormatter | 用于设置月份的自定义数据 | (month: any) => CellState | 无 |
3334
| localeText | 国际化文案 | Partial`<LocaleText>` | 无 |
3435
| changedScrollIntoView | 选中值改变后是否滚动视图 | boolean | 无 |
3536

‎compiled/alipay/src/Calendar/index.ts

+23-11
Original file line numberDiff line numberDiff line change
@@ -116,13 +116,19 @@ Component(
116116
}
117117
},
118118
updateData() {
119-
const [monthRange, plocaleText, pweekStartsOn, onFormatter] =
120-
getValueFromProps(this, [
121-
'monthRange',
122-
'localeText',
123-
'weekStartsOn',
124-
'onFormatter',
125-
]);
119+
const [
120+
monthRange,
121+
plocaleText,
122+
pweekStartsOn,
123+
onFormatter,
124+
onMonthFormatter,
125+
] = getValueFromProps(this, [
126+
'monthRange',
127+
'localeText',
128+
'weekStartsOn',
129+
'onFormatter',
130+
'onMonthFormatter',
131+
]);
126132
const localeText = Object.assign({}, defaultLocaleText, plocaleText);
127133
const markItems = [...localeText.weekdayNames];
128134
const weekStartsOn = pweekStartsOn;
@@ -146,6 +152,7 @@ Component(
146152
isSelectedBegin,
147153
isSelectedEnd,
148154
isSelected,
155+
className,
149156
} = o;
150157
const newState =
151158
onFormatter(
@@ -157,13 +164,14 @@ Component(
157164
isSelectedBegin,
158165
isSelectedEnd,
159166
isSelected,
167+
className,
160168
},
161169
value
162170
) ?? {};
163171
const result = { ...o };
164172
if (typeof newState === 'object') {
165-
// 只允许修改三个字段
166-
['top', 'bottom', 'disabled'].forEach((key) => {
173+
// 只允许修改的字段字段
174+
['top', 'bottom', 'disabled', 'className'].forEach((key) => {
167175
if (key in newState) {
168176
result[key] = newState[key];
169177
}
@@ -172,12 +180,16 @@ Component(
172180
return result;
173181
});
174182
}
175-
return {
183+
let month = {
176184
title: p.format(localeText.title),
185+
className: '',
177186
cells,
178187
};
188+
if (onMonthFormatter && typeof onMonthFormatter === 'function') {
189+
month = { ...month, ...onMonthFormatter(p) };
190+
}
191+
return month;
179192
});
180-
181193
this.setData({ markItems, monthList });
182194
},
183195
},

‎compiled/alipay/src/Calendar/props.ts

+12
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,10 @@ export interface LocaleText {
4545
}
4646

4747
export interface CellState {
48+
/**
49+
* 类名
50+
*/
51+
className?: string;
4852
/**
4953
* 是否被禁止
5054
*/
@@ -132,6 +136,7 @@ export interface ICalendarProps extends IBaseProps {
132136
onFormatter?: (
133137
cell: Pick<
134138
CellState,
139+
| 'className'
135140
| 'disabled'
136141
| 'top'
137142
| 'bottom'
@@ -142,6 +147,12 @@ export interface ICalendarProps extends IBaseProps {
142147
>,
143148
currentValue: CalendarValue
144149
) => Pick<CellState, 'disabled' | 'top' | 'bottom'>;
150+
/**
151+
* onMonthFormatter 用于设置月份的自定义数据
152+
* @param month 原始数据
153+
* @returns 返回新的数据
154+
*/
155+
onMonthFormatter?: (month) => { title?: string; className?: string };
145156
}
146157

147158
export const CalendarDefaultProps = {
@@ -152,5 +163,6 @@ export const CalendarDefaultProps = {
152163
weekStartsOn: 'Sunday',
153164
localeText: defaultLocaleText,
154165
onFormatter: null,
166+
onMonthFormatter: null,
155167
changedScrollIntoView: null,
156168
};

‎compiled/wechat/demo/pages/Calendar/index.js

+14-1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ function demo8Formatter(cell) {
1616
topClassName = isOdd ? 'odd' : 'even';
1717
}
1818
return {
19+
className: dayjs(cell.time).isAfter(dayjs().add(1, 'M'), 'd')
20+
? 'hidden'
21+
: '',
1922
top: {
2023
className: topClassName,
2124
label: isOdd ? '奇数' : '偶数',
@@ -25,6 +28,11 @@ function demo8Formatter(cell) {
2528
},
2629
};
2730
}
31+
function demo8MonthFormatter(month) {
32+
return {
33+
className: dayjs(month).isAfter(dayjs()) ? 'shrink' : '',
34+
};
35+
}
2836
function demoFormatter(cell, value) {
2937
if (Array.isArray(value) && value.length == 1) {
3038
const current = value[0];
@@ -72,10 +80,14 @@ Page({
7280
},
7381
demo8: {
7482
visible: true,
75-
monthRange: [new Date().getTime(), new Date().getTime()],
83+
monthRange: [
84+
dayjs().toDate().getTime(),
85+
dayjs().add(1, 'M').toDate().getTime(),
86+
],
7687
},
7788
demoFormatter,
7889
demo8Formatter,
90+
demo8MonthFormatter,
7991
demo9: {
8092
visible: true,
8193
value: nowDate,
@@ -99,6 +111,7 @@ Page({
99111
},
100112
demoFormatter,
101113
demo8Formatter,
114+
demo8MonthFormatter,
102115
demo9HandleChange(value) {
103116
this.setData({
104117
'demo9.value': value.detail,

‎compiled/wechat/demo/pages/Calendar/index.wxml

+2-1
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,8 @@
5252
<view slot="content">
5353
<ant-calendar
5454
monthRange="{{ demo8.monthRange }}"
55-
onFormatter="{{ demo8Formatter ? demo8Formatter : 'demo8Formatter' }}" />
55+
onFormatter="{{ demo8Formatter ? demo8Formatter : 'demo8Formatter' }}"
56+
onMonthFormatter="{{ demo8MonthFormatter ? demo8MonthFormatter : 'demo8MonthFormatter' }}" />
5657
</view>
5758
</collapse-container>
5859

‎compiled/wechat/demo/pages/Calendar/index.wxss

+8
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,11 @@ page {
2222
.even {
2323
color: blue;
2424
}
25+
.ant-calendar-cell.hidden {
26+
opacity: 0;
27+
pointer-events: none;
28+
}
29+
.ant-calendar-body-container.shrink {
30+
height: 100px;
31+
overflow: hidden;
32+
}

‎compiled/wechat/src/Calendar/helper.wxs

+3-2
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ function getClassName(value, index) {
1111
isRowEnd = value.isRowEnd,
1212
inThisMonth = value.inThisMonth,
1313
isToday = value.isToday,
14-
disabled = value.disabled;
14+
disabled = value.disabled,
15+
className = value.className;
1516
var classNames = {
1617
disabled: disabled,
1718
today: inThisMonth && isToday,
@@ -23,7 +24,7 @@ function getClassName(value, index) {
2324
hidden: !inThisMonth,
2425
'row-end': index % 7 === 6
2526
};
26-
var result = 'ant-calendar-cell';
27+
var result = "ant-calendar-cell ".concat(className || '');
2728
keys(classNames).forEach(function (key) {
2829
if (classNames[key]) {
2930
result += " ant-calendar-cell-".concat(key);

‎compiled/wechat/src/Calendar/index.js

+12-5
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,8 @@ Component(CalendarDefaultProps, {
172172
'localeText',
173173
'weekStartsOn',
174174
'onFormatter',
175-
]), monthRange = _a[0], plocaleText = _a[1], pweekStartsOn = _a[2], onFormatter = _a[3];
175+
'onMonthFormatter',
176+
]), monthRange = _a[0], plocaleText = _a[1], pweekStartsOn = _a[2], onFormatter = _a[3], onMonthFormatter = _a[4];
176177
var localeText = Object.assign({}, defaultLocaleText, plocaleText);
177178
var markItems = __spreadArray([], localeText.weekdayNames, true);
178179
var weekStartsOn = pweekStartsOn;
@@ -187,7 +188,7 @@ Component(CalendarDefaultProps, {
187188
if (onFormatter && typeof onFormatter === 'function') {
188189
cells = cells.map(function (o) {
189190
var _a;
190-
var time = o.time, top = o.top, bottom = o.bottom, disabled = o.disabled, isSelectedBegin = o.isSelectedBegin, isSelectedEnd = o.isSelectedEnd, isSelected = o.isSelected;
191+
var time = o.time, top = o.top, bottom = o.bottom, disabled = o.disabled, isSelectedBegin = o.isSelectedBegin, isSelectedEnd = o.isSelectedEnd, isSelected = o.isSelected, className = o.className;
191192
var newState = (_a = onFormatter({
192193
time: time,
193194
top: top ? __assign({}, top) : undefined,
@@ -196,11 +197,12 @@ Component(CalendarDefaultProps, {
196197
isSelectedBegin: isSelectedBegin,
197198
isSelectedEnd: isSelectedEnd,
198199
isSelected: isSelected,
200+
className: className,
199201
}, value)) !== null && _a !== void 0 ? _a : {};
200202
var result = __assign({}, o);
201203
if (typeof newState === 'object') {
202-
// 只允许修改三个字段
203-
['top', 'bottom', 'disabled'].forEach(function (key) {
204+
// 只允许修改的字段字段
205+
['top', 'bottom', 'disabled', 'className'].forEach(function (key) {
204206
if (key in newState) {
205207
result[key] = newState[key];
206208
}
@@ -209,10 +211,15 @@ Component(CalendarDefaultProps, {
209211
return result;
210212
});
211213
}
212-
return {
214+
var month = {
213215
title: p.format(localeText.title),
216+
className: '',
214217
cells: cells,
215218
};
219+
if (onMonthFormatter && typeof onMonthFormatter === 'function') {
220+
month = __assign(__assign({}, month), onMonthFormatter(p));
221+
}
222+
return month;
216223
});
217224
this.setData({ markItems: markItems, monthList: monthList });
218225
},

‎compiled/wechat/src/Calendar/index.md

+1
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ toc: 'content'
3030
| weekStartsOn | 星期栏，以周几作为第一天显示。默认为 `Sunday` | `Sunday` \| `Monday` | `Sunday` |
3131
| onChange | 日期变化回调 | (date: CalendarValue) => void | 无 |
3232
| onFormatter | 用于设置单元格的自定义数据 | (cell: CellState, currentValue: CalendarValue) => CellState | 无 |
33+
| onMonthFormatter | 用于设置月份的自定义数据 | (month: any) => CellState | 无 |
3334
| localeText | 国际化文案 | Partial`<LocaleText>` | 无 |
3435
| changedScrollIntoView | 选中值改变后是否滚动视图 | boolean | 无 |
3536

‎compiled/wechat/src/Calendar/index.wxml

+2-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,8 @@
4343
wx:for="{{ monthList }}"
4444
wx:for-index="index"
4545
wx:for-item="currentMonth">
46-
<view class="ant-calendar-body-container">
46+
<view
47+
class="ant-calendar-body-container {{ currentMonth.className || '' }}">
4748
<view class="ant-calendar-title-container">
4849
<view class="ant-calendar-title">{{ currentMonth.title }}</view>
4950
</view>

‎compiled/wechat/src/Calendar/props.js

+1
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,6 @@ export var CalendarDefaultProps = {
1515
weekStartsOn: 'Sunday',
1616
localeText: defaultLocaleText,
1717
onFormatter: null,
18+
onMonthFormatter: null,
1819
changedScrollIntoView: null,
1920
};

‎demo/pages/Calendar/index.axml.tsx

+4
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export default ({
1717
demo9,
1818
prop,
1919
demo8Formatter,
20+
demo8MonthFormatter,
2021
demoFormatter,
2122
}: InternalData) => (
2223
<Page>
@@ -68,6 +69,9 @@ export default ({
6869
<AntCalendar
6970
monthRange={demo8.monthRange}
7071
onFormatter={demo8Formatter ? demo8Formatter : 'demo8Formatter'}
72+
onMonthFormatter={
73+
demo8MonthFormatter ? demo8MonthFormatter : 'demo8MonthFormatter'
74+
}
7175
/>
7276
</View>
7377
</CollapseContainer>

0 commit comments

Comments
 (0)