@tuya-miniapp/smart-ui 1.1.0 → 1.2.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/calendar/calendar.wxml +6 -0
- package/dist/calendar/components/header/index.js +2 -1
- package/dist/calendar/components/month/index.js +10 -4
- package/dist/calendar/components/month/index.wxml +3 -4
- package/dist/calendar/components/month/index.wxs +7 -5
- package/dist/calendar/index.css +1 -1
- package/dist/calendar/index.js +12 -2
- package/dist/calendar/index.wxs +5 -0
- package/dist/calendar/index.wxss +1 -1
- package/dist/calendar/utils.d.ts +1 -1
- package/dist/calendar/utils.js +4 -2
- package/lib/calendar/calendar.wxml +6 -0
- package/lib/calendar/components/header/index.js +2 -1
- package/lib/calendar/components/month/index.js +10 -4
- package/lib/calendar/components/month/index.wxml +3 -4
- package/lib/calendar/components/month/index.wxs +7 -5
- package/lib/calendar/index.css +1 -1
- package/lib/calendar/index.js +12 -2
- package/lib/calendar/index.wxs +5 -0
- package/lib/calendar/index.wxss +1 -1
- package/lib/calendar/utils.d.ts +1 -1
- package/lib/calendar/utils.js +5 -2
- package/package.json +1 -1
@@ -8,6 +8,7 @@
|
|
8
8
|
showSubtitle="{{ showSubtitle }}"
|
9
9
|
firstDayOfWeek="{{ firstDayOfWeek }}"
|
10
10
|
bind:click-subtitle="onClickSubtitle"
|
11
|
+
defaultWeeks="{{locale.shortWeekDays || ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']}}"
|
11
12
|
>
|
12
13
|
<slot name="title" slot="title"></slot>
|
13
14
|
</header>
|
@@ -22,7 +23,12 @@
|
|
22
23
|
wx:key="index"
|
23
24
|
id="month{{ index }}"
|
24
25
|
class="month"
|
26
|
+
visible="{{ computed.getVisible(visibleIndex, index) }}"
|
27
|
+
subFormatter="{{locale.subFormatter || 'YYYY-MM'}}"
|
28
|
+
rangeStart="{{locale.rangeStart || 'Start'}}"
|
29
|
+
rangeEnd="{{locale.rangeEnd || 'End'}}"
|
25
30
|
data-date="{{ item }}"
|
31
|
+
data-index="{{index}}"
|
26
32
|
date="{{ item }}"
|
27
33
|
type="{{ type }}"
|
28
34
|
color="{{ color }}"
|
@@ -8,6 +8,7 @@ SmartComponent({
|
|
8
8
|
subtitle: String,
|
9
9
|
showTitle: Boolean,
|
10
10
|
showSubtitle: Boolean,
|
11
|
+
defaultWeeks: Array,
|
11
12
|
firstDayOfWeek: {
|
12
13
|
type: Number,
|
13
14
|
observer: 'initWeekDay',
|
@@ -21,7 +22,7 @@ SmartComponent({
|
|
21
22
|
},
|
22
23
|
methods: {
|
23
24
|
initWeekDay() {
|
24
|
-
const defaultWeeks =
|
25
|
+
const defaultWeeks = this.properties.defaultWeeks;
|
25
26
|
const firstDayOfWeek = this.data.firstDayOfWeek || 0;
|
26
27
|
this.setData({
|
27
28
|
weekdays: [
|
@@ -33,12 +33,18 @@ SmartComponent({
|
|
33
33
|
type: Number,
|
34
34
|
observer: 'setDays',
|
35
35
|
},
|
36
|
+
visible: {
|
37
|
+
type: Boolean,
|
38
|
+
value: true
|
39
|
+
},
|
40
|
+
subFormatter: String,
|
41
|
+
rangeStart: String,
|
42
|
+
rangeEnd: String,
|
36
43
|
allowSameDay: Boolean,
|
37
44
|
showSubtitle: Boolean,
|
38
45
|
showMonthTitle: Boolean,
|
39
46
|
},
|
40
47
|
data: {
|
41
|
-
visible: true,
|
42
48
|
days: [],
|
43
49
|
},
|
44
50
|
methods: {
|
@@ -140,13 +146,13 @@ SmartComponent({
|
|
140
146
|
getBottomInfo(type) {
|
141
147
|
if (this.data.type === 'range') {
|
142
148
|
if (type === 'start') {
|
143
|
-
return '
|
149
|
+
return this.properties.rangeStart || 'Start';
|
144
150
|
}
|
145
151
|
if (type === 'end') {
|
146
|
-
return '
|
152
|
+
return this.properties.rangeEnd || 'End';
|
147
153
|
}
|
148
154
|
if (type === 'start-end') {
|
149
|
-
return '
|
155
|
+
return (this.properties.rangeStart || 'Start') + '/' + (this.properties.rangeEnd || 'End');
|
150
156
|
}
|
151
157
|
}
|
152
158
|
},
|
@@ -3,7 +3,7 @@
|
|
3
3
|
|
4
4
|
<view class="smart-calendar__month" style="{{ computed.getMonthStyle(visible, date, rowHeight) }}">
|
5
5
|
<view wx:if="{{ showMonthTitle }}" class="smart-calendar__month-title">
|
6
|
-
{{ computed.formatMonthTitle(date) }}
|
6
|
+
{{ computed.formatMonthTitle(date, subFormatter) }}
|
7
7
|
</view>
|
8
8
|
|
9
9
|
<view wx:if="{{ visible }}" class="smart-calendar__days">
|
@@ -26,14 +26,13 @@
|
|
26
26
|
{{ item.bottomInfo }}
|
27
27
|
</view>
|
28
28
|
</view>
|
29
|
-
|
30
|
-
<view wx:else>
|
29
|
+
<block wx:else>
|
31
30
|
<view wx:if="{{ item.topInfo }}" class="smart-calendar__top-info">{{ item.topInfo }}</view>
|
32
31
|
{{ item.text }}
|
33
32
|
<view wx:if="{{ item.bottomInfo }}" class="smart-calendar__bottom-info">
|
34
33
|
{{ item.bottomInfo }}
|
35
34
|
</view>
|
36
|
-
</
|
35
|
+
</block>
|
37
36
|
</view>
|
38
37
|
</view>
|
39
38
|
</view>
|
@@ -11,8 +11,8 @@ function getDayStyle(type, index, date, rowHeight, color, firstDayOfWeek) {
|
|
11
11
|
var style = [];
|
12
12
|
var current = getDate(date).getDay() || 7;
|
13
13
|
var offset = current < firstDayOfWeek ? (7 - firstDayOfWeek + current) :
|
14
|
-
|
15
|
-
|
14
|
+
current === 7 && firstDayOfWeek === 0 ? 0 :
|
15
|
+
(current - firstDayOfWeek);
|
16
16
|
|
17
17
|
if (index === 0) {
|
18
18
|
style.push(['margin-left', (100 * offset) / 7 + '%']);
|
@@ -37,15 +37,17 @@ function getDayStyle(type, index, date, rowHeight, color, firstDayOfWeek) {
|
|
37
37
|
}
|
38
38
|
|
39
39
|
return style
|
40
|
-
.map(function(item) {
|
40
|
+
.map(function (item) {
|
41
41
|
return item.join(':');
|
42
42
|
})
|
43
43
|
.join(';');
|
44
44
|
}
|
45
45
|
|
46
|
-
function formatMonthTitle(date) {
|
46
|
+
function formatMonthTitle(date, formatter = "YYYY-MM") {
|
47
47
|
date = getDate(date);
|
48
|
-
|
48
|
+
const year = date.getFullYear();
|
49
|
+
const month = date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1 + "";
|
50
|
+
return formatter.replace('YYYY', year + '').replace('MM', month);
|
49
51
|
}
|
50
52
|
|
51
53
|
function getMonthStyle(visible, date, rowHeight) {
|
package/dist/calendar/index.css
CHANGED
@@ -1 +1 @@
|
|
1
|
-
@import '../common/index.css';.smart-calendar{background-color:var(--calendar-background-color,var(--app-B6,#fff));display:flex;flex-direction:column;height:var(--calendar-height,100%)}.smart-calendar__close-icon{top:11px}.smart-calendar__popup--bottom,.smart-calendar__popup--top{height:var(--calendar-popup-height,90%)}.smart-calendar__popup--left,.smart-calendar__popup--right{height:100%}.smart-calendar__body{-webkit-overflow-scrolling:touch;flex:1;overflow:auto}.smart-calendar__footer{flex-shrink:0;padding:0 var(--padding-md,16px)}.smart-calendar__footer--safe-area-inset-bottom{padding-bottom:env(safe-area-inset-bottom)}.smart-calendar__footer+.smart-calendar__footer,.smart-calendar__footer:empty{display:none}.smart-calendar__footer:empty+.smart-calendar__footer{display:block!important}.smart-calendar__confirm{height:var(--calendar-confirm-button-height,36px)!important;line-height:var(--calendar-confirm-button-line-height,34px)!important;margin:var(--calendar-confirm-button-margin,7px 0)!important}
|
1
|
+
@import '../common/index.css';.smart-calendar{background-color:var(--calendar-background-color,var(--app-B6,#fff));color:var(--calendar-text-color,#000);display:flex;flex-direction:column;height:var(--calendar-height,100%)}.smart-calendar__close-icon{top:11px}.smart-calendar__popup--bottom,.smart-calendar__popup--top{height:var(--calendar-popup-height,90%)}.smart-calendar__popup--left,.smart-calendar__popup--right{height:100%}.smart-calendar__body{-webkit-overflow-scrolling:touch;flex:1;overflow:auto}.smart-calendar__footer{flex-shrink:0;padding:0 var(--padding-md,16px)}.smart-calendar__footer--safe-area-inset-bottom{padding-bottom:env(safe-area-inset-bottom)}.smart-calendar__footer+.smart-calendar__footer,.smart-calendar__footer:empty{display:none}.smart-calendar__footer:empty+.smart-calendar__footer{display:block!important}.smart-calendar__confirm{height:var(--calendar-confirm-button-height,36px)!important;line-height:var(--calendar-confirm-button-line-height,34px)!important;margin:var(--calendar-confirm-button-margin,7px 0)!important}
|
package/dist/calendar/index.js
CHANGED
@@ -24,6 +24,15 @@ SmartComponent({
|
|
24
24
|
}
|
25
25
|
},
|
26
26
|
},
|
27
|
+
locale: {
|
28
|
+
type: Object,
|
29
|
+
value: {
|
30
|
+
shortWeekDays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
|
31
|
+
subFormatter: 'YYYY-MM',
|
32
|
+
rangeStart: 'Start',
|
33
|
+
rangeEnd: 'End',
|
34
|
+
},
|
35
|
+
},
|
27
36
|
formatter: null,
|
28
37
|
confirmText: {
|
29
38
|
type: String,
|
@@ -122,6 +131,7 @@ SmartComponent({
|
|
122
131
|
subtitle: '',
|
123
132
|
currentDate: null,
|
124
133
|
scrollIntoView: '',
|
134
|
+
visibleIndex: 0
|
125
135
|
},
|
126
136
|
watch: {
|
127
137
|
minDate() {
|
@@ -163,7 +173,7 @@ SmartComponent({
|
|
163
173
|
contentObserver.observe('.month', (res) => {
|
164
174
|
if (res.boundingClientRect.top <= res.relativeRect.top) {
|
165
175
|
// @ts-ignore
|
166
|
-
this.setData({ subtitle: formatMonthTitle(res.dataset.date) });
|
176
|
+
this.setData({ subtitle: formatMonthTitle(res.dataset.date, this.properties.locale.subFormatter), visibleIndex: res.dataset.index });
|
167
177
|
}
|
168
178
|
});
|
169
179
|
},
|
@@ -221,7 +231,7 @@ SmartComponent({
|
|
221
231
|
const months = getMonths(minDate, maxDate);
|
222
232
|
months.some((month, index) => {
|
223
233
|
if (compareMonth(month, targetDate) === 0) {
|
224
|
-
this.setData({ scrollIntoView: `month${index}
|
234
|
+
this.setData({ scrollIntoView: `month${index}`, visibleIndex: index });
|
225
235
|
return true;
|
226
236
|
}
|
227
237
|
return false;
|
package/dist/calendar/index.wxs
CHANGED
@@ -31,7 +31,12 @@ function getButtonDisabled(type, currentDate, minRange) {
|
|
31
31
|
return !currentDate;
|
32
32
|
}
|
33
33
|
|
34
|
+
function getVisible(visibleIndex, curIndex) {
|
35
|
+
return Math.abs(visibleIndex - curIndex) < 2;
|
36
|
+
}
|
37
|
+
|
34
38
|
module.exports = {
|
35
39
|
getMonths: getMonths,
|
40
|
+
getVisible,
|
36
41
|
getButtonDisabled: getButtonDisabled
|
37
42
|
};
|
package/dist/calendar/index.wxss
CHANGED
@@ -1 +1 @@
|
|
1
|
-
@import '../common/index.wxss';.smart-calendar{background-color:var(--calendar-background-color,var(--app-B6,#fff));display:flex;flex-direction:column;height:var(--calendar-height,100%)}.smart-calendar__close-icon{top:11px}.smart-calendar__popup--bottom,.smart-calendar__popup--top{height:var(--calendar-popup-height,90%)}.smart-calendar__popup--left,.smart-calendar__popup--right{height:100%}.smart-calendar__body{-webkit-overflow-scrolling:touch;flex:1;overflow:auto}.smart-calendar__footer{flex-shrink:0;padding:0 var(--padding-md,16px)}.smart-calendar__footer--safe-area-inset-bottom{padding-bottom:env(safe-area-inset-bottom)}.smart-calendar__footer+.smart-calendar__footer,.smart-calendar__footer:empty{display:none}.smart-calendar__footer:empty+.smart-calendar__footer{display:block!important}.smart-calendar__confirm{height:var(--calendar-confirm-button-height,36px)!important;line-height:var(--calendar-confirm-button-line-height,34px)!important;margin:var(--calendar-confirm-button-margin,7px 0)!important}
|
1
|
+
@import '../common/index.wxss';.smart-calendar{background-color:var(--calendar-background-color,var(--app-B6,#fff));color:var(--calendar-text-color,#000);display:flex;flex-direction:column;height:var(--calendar-height,100%)}.smart-calendar__close-icon{top:11px}.smart-calendar__popup--bottom,.smart-calendar__popup--top{height:var(--calendar-popup-height,90%)}.smart-calendar__popup--left,.smart-calendar__popup--right{height:100%}.smart-calendar__body{-webkit-overflow-scrolling:touch;flex:1;overflow:auto}.smart-calendar__footer{flex-shrink:0;padding:0 var(--padding-md,16px)}.smart-calendar__footer--safe-area-inset-bottom{padding-bottom:env(safe-area-inset-bottom)}.smart-calendar__footer+.smart-calendar__footer,.smart-calendar__footer:empty{display:none}.smart-calendar__footer:empty+.smart-calendar__footer{display:block!important}.smart-calendar__confirm{height:var(--calendar-confirm-button-height,36px)!important;line-height:var(--calendar-confirm-button-line-height,34px)!important;margin:var(--calendar-confirm-button-margin,7px 0)!important}
|
package/dist/calendar/utils.d.ts
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
export declare const ROW_HEIGHT = 64;
|
2
|
-
export declare function formatMonthTitle(date: Date): string;
|
2
|
+
export declare function formatMonthTitle(date: Date, formatter?: string): string;
|
3
3
|
export declare function compareMonth(date1: Date | number, date2: Date | number): 0 | 1 | -1;
|
4
4
|
export declare function compareDay(day1: Date | number, day2: Date | number): 0 | 1 | -1;
|
5
5
|
export declare function getDayByOffset(date: Date, offset: number): Date;
|
package/dist/calendar/utils.js
CHANGED
@@ -1,9 +1,11 @@
|
|
1
1
|
export const ROW_HEIGHT = 64;
|
2
|
-
export function formatMonthTitle(date) {
|
2
|
+
export function formatMonthTitle(date, formatter = 'YYYY-MM') {
|
3
3
|
if (!(date instanceof Date)) {
|
4
4
|
date = new Date(date);
|
5
5
|
}
|
6
|
-
|
6
|
+
const year = date.getFullYear();
|
7
|
+
const month = date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1 + "";
|
8
|
+
return formatter.replace('YYYY', year + '').replace('MM', month);
|
7
9
|
}
|
8
10
|
export function compareMonth(date1, date2) {
|
9
11
|
if (!(date1 instanceof Date)) {
|
@@ -8,6 +8,7 @@
|
|
8
8
|
showSubtitle="{{ showSubtitle }}"
|
9
9
|
firstDayOfWeek="{{ firstDayOfWeek }}"
|
10
10
|
bind:click-subtitle="onClickSubtitle"
|
11
|
+
defaultWeeks="{{locale.shortWeekDays || ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']}}"
|
11
12
|
>
|
12
13
|
<slot name="title" slot="title"></slot>
|
13
14
|
</header>
|
@@ -22,7 +23,12 @@
|
|
22
23
|
wx:key="index"
|
23
24
|
id="month{{ index }}"
|
24
25
|
class="month"
|
26
|
+
visible="{{ computed.getVisible(visibleIndex, index) }}"
|
27
|
+
subFormatter="{{locale.subFormatter || 'YYYY-MM'}}"
|
28
|
+
rangeStart="{{locale.rangeStart || 'Start'}}"
|
29
|
+
rangeEnd="{{locale.rangeEnd || 'End'}}"
|
25
30
|
data-date="{{ item }}"
|
31
|
+
data-index="{{index}}"
|
26
32
|
date="{{ item }}"
|
27
33
|
type="{{ type }}"
|
28
34
|
color="{{ color }}"
|
@@ -19,6 +19,7 @@ var component_1 = require("../../../common/component");
|
|
19
19
|
subtitle: String,
|
20
20
|
showTitle: Boolean,
|
21
21
|
showSubtitle: Boolean,
|
22
|
+
defaultWeeks: Array,
|
22
23
|
firstDayOfWeek: {
|
23
24
|
type: Number,
|
24
25
|
observer: 'initWeekDay',
|
@@ -32,7 +33,7 @@ var component_1 = require("../../../common/component");
|
|
32
33
|
},
|
33
34
|
methods: {
|
34
35
|
initWeekDay: function () {
|
35
|
-
var defaultWeeks =
|
36
|
+
var defaultWeeks = this.properties.defaultWeeks;
|
36
37
|
var firstDayOfWeek = this.data.firstDayOfWeek || 0;
|
37
38
|
this.setData({
|
38
39
|
weekdays: __spreadArray(__spreadArray([], defaultWeeks.slice(firstDayOfWeek, 7), true), defaultWeeks.slice(0, firstDayOfWeek), true),
|
@@ -35,12 +35,18 @@ var utils_1 = require("../../utils");
|
|
35
35
|
type: Number,
|
36
36
|
observer: 'setDays',
|
37
37
|
},
|
38
|
+
visible: {
|
39
|
+
type: Boolean,
|
40
|
+
value: true
|
41
|
+
},
|
42
|
+
subFormatter: String,
|
43
|
+
rangeStart: String,
|
44
|
+
rangeEnd: String,
|
38
45
|
allowSameDay: Boolean,
|
39
46
|
showSubtitle: Boolean,
|
40
47
|
showMonthTitle: Boolean,
|
41
48
|
},
|
42
49
|
data: {
|
43
|
-
visible: true,
|
44
50
|
days: [],
|
45
51
|
},
|
46
52
|
methods: {
|
@@ -144,13 +150,13 @@ var utils_1 = require("../../utils");
|
|
144
150
|
getBottomInfo: function (type) {
|
145
151
|
if (this.data.type === 'range') {
|
146
152
|
if (type === 'start') {
|
147
|
-
return '
|
153
|
+
return this.properties.rangeStart || 'Start';
|
148
154
|
}
|
149
155
|
if (type === 'end') {
|
150
|
-
return '
|
156
|
+
return this.properties.rangeEnd || 'End';
|
151
157
|
}
|
152
158
|
if (type === 'start-end') {
|
153
|
-
return '
|
159
|
+
return (this.properties.rangeStart || 'Start') + '/' + (this.properties.rangeEnd || 'End');
|
154
160
|
}
|
155
161
|
}
|
156
162
|
},
|
@@ -3,7 +3,7 @@
|
|
3
3
|
|
4
4
|
<view class="smart-calendar__month" style="{{ computed.getMonthStyle(visible, date, rowHeight) }}">
|
5
5
|
<view wx:if="{{ showMonthTitle }}" class="smart-calendar__month-title">
|
6
|
-
{{ computed.formatMonthTitle(date) }}
|
6
|
+
{{ computed.formatMonthTitle(date, subFormatter) }}
|
7
7
|
</view>
|
8
8
|
|
9
9
|
<view wx:if="{{ visible }}" class="smart-calendar__days">
|
@@ -26,14 +26,13 @@
|
|
26
26
|
{{ item.bottomInfo }}
|
27
27
|
</view>
|
28
28
|
</view>
|
29
|
-
|
30
|
-
<view wx:else>
|
29
|
+
<block wx:else>
|
31
30
|
<view wx:if="{{ item.topInfo }}" class="smart-calendar__top-info">{{ item.topInfo }}</view>
|
32
31
|
{{ item.text }}
|
33
32
|
<view wx:if="{{ item.bottomInfo }}" class="smart-calendar__bottom-info">
|
34
33
|
{{ item.bottomInfo }}
|
35
34
|
</view>
|
36
|
-
</
|
35
|
+
</block>
|
37
36
|
</view>
|
38
37
|
</view>
|
39
38
|
</view>
|
@@ -11,8 +11,8 @@ function getDayStyle(type, index, date, rowHeight, color, firstDayOfWeek) {
|
|
11
11
|
var style = [];
|
12
12
|
var current = getDate(date).getDay() || 7;
|
13
13
|
var offset = current < firstDayOfWeek ? (7 - firstDayOfWeek + current) :
|
14
|
-
|
15
|
-
|
14
|
+
current === 7 && firstDayOfWeek === 0 ? 0 :
|
15
|
+
(current - firstDayOfWeek);
|
16
16
|
|
17
17
|
if (index === 0) {
|
18
18
|
style.push(['margin-left', (100 * offset) / 7 + '%']);
|
@@ -37,15 +37,17 @@ function getDayStyle(type, index, date, rowHeight, color, firstDayOfWeek) {
|
|
37
37
|
}
|
38
38
|
|
39
39
|
return style
|
40
|
-
.map(function(item) {
|
40
|
+
.map(function (item) {
|
41
41
|
return item.join(':');
|
42
42
|
})
|
43
43
|
.join(';');
|
44
44
|
}
|
45
45
|
|
46
|
-
function formatMonthTitle(date) {
|
46
|
+
function formatMonthTitle(date, formatter = "YYYY-MM") {
|
47
47
|
date = getDate(date);
|
48
|
-
|
48
|
+
const year = date.getFullYear();
|
49
|
+
const month = date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1 + "";
|
50
|
+
return formatter.replace('YYYY', year + '').replace('MM', month);
|
49
51
|
}
|
50
52
|
|
51
53
|
function getMonthStyle(visible, date, rowHeight) {
|
package/lib/calendar/index.css
CHANGED
@@ -1 +1 @@
|
|
1
|
-
@import '../common/index.css';.smart-calendar{background-color:var(--calendar-background-color,var(--app-B6,#fff));display:flex;flex-direction:column;height:var(--calendar-height,100%)}.smart-calendar__close-icon{top:11px}.smart-calendar__popup--bottom,.smart-calendar__popup--top{height:var(--calendar-popup-height,90%)}.smart-calendar__popup--left,.smart-calendar__popup--right{height:100%}.smart-calendar__body{-webkit-overflow-scrolling:touch;flex:1;overflow:auto}.smart-calendar__footer{flex-shrink:0;padding:0 var(--padding-md,16px)}.smart-calendar__footer--safe-area-inset-bottom{padding-bottom:env(safe-area-inset-bottom)}.smart-calendar__footer+.smart-calendar__footer,.smart-calendar__footer:empty{display:none}.smart-calendar__footer:empty+.smart-calendar__footer{display:block!important}.smart-calendar__confirm{height:var(--calendar-confirm-button-height,36px)!important;line-height:var(--calendar-confirm-button-line-height,34px)!important;margin:var(--calendar-confirm-button-margin,7px 0)!important}
|
1
|
+
@import '../common/index.css';.smart-calendar{background-color:var(--calendar-background-color,var(--app-B6,#fff));color:var(--calendar-text-color,#000);display:flex;flex-direction:column;height:var(--calendar-height,100%)}.smart-calendar__close-icon{top:11px}.smart-calendar__popup--bottom,.smart-calendar__popup--top{height:var(--calendar-popup-height,90%)}.smart-calendar__popup--left,.smart-calendar__popup--right{height:100%}.smart-calendar__body{-webkit-overflow-scrolling:touch;flex:1;overflow:auto}.smart-calendar__footer{flex-shrink:0;padding:0 var(--padding-md,16px)}.smart-calendar__footer--safe-area-inset-bottom{padding-bottom:env(safe-area-inset-bottom)}.smart-calendar__footer+.smart-calendar__footer,.smart-calendar__footer:empty{display:none}.smart-calendar__footer:empty+.smart-calendar__footer{display:block!important}.smart-calendar__confirm{height:var(--calendar-confirm-button-height,36px)!important;line-height:var(--calendar-confirm-button-line-height,34px)!important;margin:var(--calendar-confirm-button-margin,7px 0)!important}
|
package/lib/calendar/index.js
CHANGED
@@ -40,6 +40,15 @@ var getTime = function (date) {
|
|
40
40
|
}
|
41
41
|
},
|
42
42
|
},
|
43
|
+
locale: {
|
44
|
+
type: Object,
|
45
|
+
value: {
|
46
|
+
shortWeekDays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
|
47
|
+
subFormatter: 'YYYY-MM',
|
48
|
+
rangeStart: 'Start',
|
49
|
+
rangeEnd: 'End',
|
50
|
+
},
|
51
|
+
},
|
43
52
|
formatter: null,
|
44
53
|
confirmText: {
|
45
54
|
type: String,
|
@@ -138,6 +147,7 @@ var getTime = function (date) {
|
|
138
147
|
subtitle: '',
|
139
148
|
currentDate: null,
|
140
149
|
scrollIntoView: '',
|
150
|
+
visibleIndex: 0
|
141
151
|
},
|
142
152
|
watch: {
|
143
153
|
minDate: function () {
|
@@ -180,7 +190,7 @@ var getTime = function (date) {
|
|
180
190
|
contentObserver.observe('.month', function (res) {
|
181
191
|
if (res.boundingClientRect.top <= res.relativeRect.top) {
|
182
192
|
// @ts-ignore
|
183
|
-
_this.setData({ subtitle: (0, utils_1.formatMonthTitle)(res.dataset.date) });
|
193
|
+
_this.setData({ subtitle: (0, utils_1.formatMonthTitle)(res.dataset.date, _this.properties.locale.subFormatter), visibleIndex: res.dataset.index });
|
184
194
|
}
|
185
195
|
});
|
186
196
|
},
|
@@ -243,7 +253,7 @@ var getTime = function (date) {
|
|
243
253
|
var months = (0, utils_1.getMonths)(minDate, maxDate);
|
244
254
|
months.some(function (month, index) {
|
245
255
|
if ((0, utils_1.compareMonth)(month, targetDate) === 0) {
|
246
|
-
_this.setData({ scrollIntoView: "month".concat(index) });
|
256
|
+
_this.setData({ scrollIntoView: "month".concat(index), visibleIndex: index });
|
247
257
|
return true;
|
248
258
|
}
|
249
259
|
return false;
|
package/lib/calendar/index.wxs
CHANGED
@@ -31,7 +31,12 @@ function getButtonDisabled(type, currentDate, minRange) {
|
|
31
31
|
return !currentDate;
|
32
32
|
}
|
33
33
|
|
34
|
+
function getVisible(visibleIndex, curIndex) {
|
35
|
+
return Math.abs(visibleIndex - curIndex) < 2;
|
36
|
+
}
|
37
|
+
|
34
38
|
module.exports = {
|
35
39
|
getMonths: getMonths,
|
40
|
+
getVisible,
|
36
41
|
getButtonDisabled: getButtonDisabled
|
37
42
|
};
|
package/lib/calendar/index.wxss
CHANGED
@@ -1 +1 @@
|
|
1
|
-
@import '../common/index.wxss';.smart-calendar{background-color:var(--calendar-background-color,var(--app-B6,#fff));display:flex;flex-direction:column;height:var(--calendar-height,100%)}.smart-calendar__close-icon{top:11px}.smart-calendar__popup--bottom,.smart-calendar__popup--top{height:var(--calendar-popup-height,90%)}.smart-calendar__popup--left,.smart-calendar__popup--right{height:100%}.smart-calendar__body{-webkit-overflow-scrolling:touch;flex:1;overflow:auto}.smart-calendar__footer{flex-shrink:0;padding:0 var(--padding-md,16px)}.smart-calendar__footer--safe-area-inset-bottom{padding-bottom:env(safe-area-inset-bottom)}.smart-calendar__footer+.smart-calendar__footer,.smart-calendar__footer:empty{display:none}.smart-calendar__footer:empty+.smart-calendar__footer{display:block!important}.smart-calendar__confirm{height:var(--calendar-confirm-button-height,36px)!important;line-height:var(--calendar-confirm-button-line-height,34px)!important;margin:var(--calendar-confirm-button-margin,7px 0)!important}
|
1
|
+
@import '../common/index.wxss';.smart-calendar{background-color:var(--calendar-background-color,var(--app-B6,#fff));color:var(--calendar-text-color,#000);display:flex;flex-direction:column;height:var(--calendar-height,100%)}.smart-calendar__close-icon{top:11px}.smart-calendar__popup--bottom,.smart-calendar__popup--top{height:var(--calendar-popup-height,90%)}.smart-calendar__popup--left,.smart-calendar__popup--right{height:100%}.smart-calendar__body{-webkit-overflow-scrolling:touch;flex:1;overflow:auto}.smart-calendar__footer{flex-shrink:0;padding:0 var(--padding-md,16px)}.smart-calendar__footer--safe-area-inset-bottom{padding-bottom:env(safe-area-inset-bottom)}.smart-calendar__footer+.smart-calendar__footer,.smart-calendar__footer:empty{display:none}.smart-calendar__footer:empty+.smart-calendar__footer{display:block!important}.smart-calendar__confirm{height:var(--calendar-confirm-button-height,36px)!important;line-height:var(--calendar-confirm-button-line-height,34px)!important;margin:var(--calendar-confirm-button-margin,7px 0)!important}
|
package/lib/calendar/utils.d.ts
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
export declare const ROW_HEIGHT = 64;
|
2
|
-
export declare function formatMonthTitle(date: Date): string;
|
2
|
+
export declare function formatMonthTitle(date: Date, formatter?: string): string;
|
3
3
|
export declare function compareMonth(date1: Date | number, date2: Date | number): 0 | 1 | -1;
|
4
4
|
export declare function compareDay(day1: Date | number, day2: Date | number): 0 | 1 | -1;
|
5
5
|
export declare function getDayByOffset(date: Date, offset: number): Date;
|
package/lib/calendar/utils.js
CHANGED
@@ -2,11 +2,14 @@
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
3
3
|
exports.getMonths = exports.getMonthEndDay = exports.copyDates = exports.calcDateNum = exports.getToday = exports.getNextDay = exports.getPrevDay = exports.getDayByOffset = exports.compareDay = exports.compareMonth = exports.formatMonthTitle = exports.ROW_HEIGHT = void 0;
|
4
4
|
exports.ROW_HEIGHT = 64;
|
5
|
-
function formatMonthTitle(date) {
|
5
|
+
function formatMonthTitle(date, formatter) {
|
6
|
+
if (formatter === void 0) { formatter = 'YYYY-MM'; }
|
6
7
|
if (!(date instanceof Date)) {
|
7
8
|
date = new Date(date);
|
8
9
|
}
|
9
|
-
|
10
|
+
var year = date.getFullYear();
|
11
|
+
var month = date.getMonth() + 1 < 10 ? "0".concat(date.getMonth() + 1) : date.getMonth() + 1 + "";
|
12
|
+
return formatter.replace('YYYY', year + '').replace('MM', month);
|
10
13
|
}
|
11
14
|
exports.formatMonthTitle = formatMonthTitle;
|
12
15
|
function compareMonth(date1, date2) {
|