Skip to content

Commit f97cc8b

Browse files
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

Lines changed: 2 additions & 1 deletion
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

Lines changed: 13 additions & 1 deletion
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

Lines changed: 10 additions & 0 deletions
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

Lines changed: 3 additions & 2 deletions
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

Lines changed: 2 additions & 1 deletion
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

Lines changed: 1 addition & 0 deletions
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

Lines changed: 23 additions & 11 deletions
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

Lines changed: 12 additions & 0 deletions
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

Lines changed: 14 additions & 1 deletion
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

Lines changed: 2 additions & 1 deletion
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

0 commit comments

Comments
 (0)