Skip to content

Commit 234d343

Browse files
thx125thx125
authored
feat(calendar): 添加自定义周起始日配置 (#1827)
1 parent 102b7f0 commit 234d343

File tree

9 files changed

+206
-6
lines changed

9 files changed

+206
-6
lines changed

‎src/packages/__VUE/calendar/__tests__/calendar.spec.ts

+23
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,29 @@ test('show-today prop', async () => {
6262
expect(wrapper.find('.calendar-curr-tip-curr').exists()).toBeFalsy();
6363
});
6464

65+
test('first-day-of-week prop', async () => {
66+
const wrapper = mount(Calendar, {
67+
props: {
68+
poppable: false,
69+
firstDayOfWeek: 2,
70+
startDate: '2022-01-01',
71+
endDate: '2022-01-31'
72+
}
73+
});
74+
await nextTick();
75+
const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
76+
// 头部周第1个元素
77+
const weekday = wrapper.findAll('.calendar-week-item')[0].text();
78+
expect(weekday).toEqual(weekdays[2]);
79+
// 日期面板第7个元素, 判断最后一天的日期是否匹配
80+
const calendarMonth = wrapper.find('.calendar-month');
81+
const monthTitle = calendarMonth.find('.calendar-month-title').text();
82+
const dayText = calendarMonth.findAll('.calendar-day')[6].text();
83+
const date = new Date(monthTitle.replace(/[年月]/g, '/') + dayText);
84+
const index = date.getDay();
85+
expect(index).toEqual(1);
86+
});
87+
6588
test('should render slot correctly', async () => {
6689
const wrapper = mount(Calendar, {
6790
props: {

‎src/packages/__VUE/calendar/demo.vue

+31-3
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,24 @@
170170
</nut-calendar>
171171
</div>
172172
<h2>{{ translate('title3') }}</h2>
173+
<div>
174+
<nut-cell
175+
:show-icon="true"
176+
:title="translate('single')"
177+
:desc="date8 ? `${date8}` : translate('please')"
178+
@click="openSwitch('isVisible8')"
179+
>
180+
</nut-cell>
181+
<nut-calendar
182+
v-model:visible="isVisible8"
183+
:default-value="date8"
184+
@close="closeSwitch('isVisible8')"
185+
@choose="setChooseValue8"
186+
:first-day-of-week="2"
187+
>
188+
</nut-calendar>
189+
</div>
190+
<h2>{{ translate('title4') }}</h2>
173191
<div class="test-calendar-wrapper">
174192
<nut-calendar :poppable="false" :default-value="date2" :is-auto-back-fill="true" @choose="setChooseValue2">
175193
</nut-calendar>
@@ -190,7 +208,8 @@ const initTranslate = () =>
190208
title: '基础用法',
191209
title1: '快捷选择',
192210
title2: '自定义日历',
193-
title3: '平铺展示',
211+
title3: '自定义周起始日',
212+
title4: '平铺展示',
194213
195214
please: '请选择',
196215
single: '选择单个日期',
@@ -213,7 +232,8 @@ const initTranslate = () =>
213232
title: 'Basic Usage',
214233
title1: 'Quick Select',
215234
title2: 'Custom Calendar',
216-
title3: 'Tiled Display',
235+
title3: 'Custom First Day Of Week',
236+
title4: 'Tiled Display',
217237
218238
please: 'Please Select Date',
219239
single: 'Select Single Date',
@@ -244,13 +264,15 @@ interface TestCalendarState {
244264
isVisible5: boolean;
245265
isVisible6: boolean;
246266
isVisible7: boolean;
267+
isVisible8: boolean;
247268
date1: string[];
248269
date2: string;
249270
date3: string;
250271
date4: string[];
251272
date5: string[];
252273
date6: string[];
253274
date7: string[];
275+
date8: string;
254276
}
255277
export default createDemo({
256278
props: {},
@@ -268,13 +290,15 @@ export default createDemo({
268290
date5: ['2021-12-23', '2021-12-26'],
269291
date6: [],
270292
date7: [],
293+
date8: '',
271294
isVisible1: false,
272295
isVisible2: false,
273296
isVisible3: false,
274297
isVisible4: false,
275298
isVisible5: false,
276299
isVisible6: false,
277-
isVisible7: false
300+
isVisible7: false,
301+
isVisible8: false
278302
});
279303
const openSwitch = (param: string) => {
280304
state[`${param}`] = true;
@@ -321,6 +345,9 @@ export default createDemo({
321345
});
322346
state.date7 = [...dateArr];
323347
};
348+
const setChooseValue8 = (param: string) => {
349+
state.date8 = param[3];
350+
};
324351
const clickBtn = (param: string) => {
325352
let date = [Utils.date2Str(new Date()), Utils.getDay(6)];
326353
state.date5 = date;
@@ -351,6 +378,7 @@ export default createDemo({
351378
setChooseValue4,
352379
setChooseValue5,
353380
setChooseValue6,
381+
setChooseValue8,
354382
clickBtn,
355383
clickBtn1,
356384
goDate,

‎src/packages/__VUE/calendar/doc.en-US.md

+55
Original file line numberDiff line numberDiff line change
@@ -495,6 +495,60 @@ export default {
495495
</script>
496496

497497
```
498+
:::
499+
500+
### Custom First Day Of Week
501+
:::demo
502+
```html
503+
<template>
504+
<nut-cell
505+
:showIcon="true"
506+
title="Custom First Day Of Week"
507+
:desc="date ? `${date} ${dateWeek}` : 'Please Select Date'"
508+
@click="openSwitch('isVisible')"
509+
:first-day-of-week="2"
510+
>
511+
</nut-cell>
512+
<nut-calendar
513+
v-model:visible="isVisible"
514+
:default-value="date"
515+
@close="closeSwitch('isVisible')"
516+
@choose="setChooseValue"
517+
:start-date="`2019-10-11`"
518+
:end-date="`2022-11-11`"
519+
>
520+
</nut-calendar>
521+
</template>
522+
<script lang="ts">
523+
import { reactive, toRefs } from 'vue';
524+
export default {
525+
setup() {
526+
const state = reactive({
527+
isVisible: false,
528+
date: '',
529+
dateWeek: ''
530+
});
531+
const openSwitch = param => {
532+
state[`${param}`] = true;
533+
};
534+
const closeSwitch = param => {
535+
state[`${param}`] = false;
536+
};
537+
const setChooseValue = param => {
538+
state.date = param[3];
539+
state.dateWeek = param[4];
540+
};
541+
return {
542+
...toRefs(state),
543+
openSwitch,
544+
closeSwitch,
545+
setChooseValue
546+
};
547+
}
548+
};
549+
</script>
550+
```
551+
498552
:::
499553
### Tiled Display
500554
:::demo
@@ -560,6 +614,7 @@ export default {
560614
| show-title | Whether to show the calendar title | Boolean | true |
561615
| show-sub-title | Whether to display the date title | Boolean | true |
562616
| to-date-animation | Whether to use scroll animation | Boolean | true |
617+
| first-day-of-week | Set the start day of week | 0-6 | 0 |
563618

564619
### Events
565620

‎src/packages/__VUE/calendar/doc.md

+56
Original file line numberDiff line numberDiff line change
@@ -487,6 +487,61 @@ export default {
487487

488488
```
489489
:::
490+
491+
### 自定义周起始日
492+
:::demo
493+
```html
494+
<template>
495+
<nut-cell
496+
:showIcon="true"
497+
title="自定义周起始日"
498+
:desc="date ? `${date} ${dateWeek}` : '请选择'"
499+
@click="openSwitch('isVisible')"
500+
:first-day-of-week="2"
501+
>
502+
</nut-cell>
503+
<nut-calendar
504+
v-model:visible="isVisible"
505+
:default-value="date"
506+
@close="closeSwitch('isVisible')"
507+
@choose="setChooseValue"
508+
:start-date="`2019-10-11`"
509+
:end-date="`2022-11-11`"
510+
>
511+
</nut-calendar>
512+
</template>
513+
<script lang="ts">
514+
import { reactive, toRefs } from 'vue';
515+
export default {
516+
setup() {
517+
const state = reactive({
518+
isVisible: false,
519+
date: '',
520+
dateWeek: ''
521+
});
522+
const openSwitch = param => {
523+
state[`${param}`] = true;
524+
};
525+
const closeSwitch = param => {
526+
state[`${param}`] = false;
527+
};
528+
const setChooseValue = param => {
529+
state.date = param[3];
530+
state.dateWeek = param[4];
531+
};
532+
return {
533+
...toRefs(state),
534+
openSwitch,
535+
closeSwitch,
536+
setChooseValue
537+
};
538+
}
539+
};
540+
</script>
541+
```
542+
543+
:::
544+
490545
### 平铺展示
491546
:::demo
492547
```html
@@ -552,6 +607,7 @@ export default {
552607
| show-title | 是否在展示日历标题 | Boolean | true |
553608
| show-sub-title | 是否展示日期标题 | Boolean | true |
554609
| to-date-animation | 是否启动滚动动画 | Boolean | true |
610+
| first-day-of-week | 设置周起始日 | 0-6 | 0 |
555611

556612
### Events
557613

‎src/packages/__VUE/calendar/index.taro.vue

+7
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
:show-title="showTitle"
3131
:show-sub-title="showSubTitle"
3232
:to-date-animation="toDateAnimation"
33+
:first-day-of-week="firstDayOfWeek"
3334
>
3435
<template v-slot:btn v-if="showTopBtn">
3536
<slot name="btn"> </slot>
@@ -64,6 +65,7 @@
6465
:show-sub-title="showSubTitle"
6566
:to-date-animation="toDateAnimation"
6667
:show-today="showToday"
68+
:first-day-of-week="firstDayOfWeek"
6769
>
6870
<template v-slot:btn v-if="showTopBtn">
6971
<slot name="btn"> </slot>
@@ -151,6 +153,11 @@ export default create({
151153
endDate: {
152154
type: String,
153155
default: Utils.getDay(365)
156+
},
157+
firstDayOfWeek: {
158+
type: Number,
159+
default: 0,
160+
validator: (val: number) => val >= 0 && val <= 6
154161
}
155162
},
156163
emits: ['choose', 'close', 'update:visible', 'select'],

‎src/packages/__VUE/calendar/index.vue

+7
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
:show-title="showTitle"
3333
:show-sub-title="showSubTitle"
3434
:to-date-animation="toDateAnimation"
35+
:first-day-of-week="firstDayOfWeek"
3536
>
3637
<template v-slot:btn v-if="showTopBtn">
3738
<slot name="btn"> </slot>
@@ -67,6 +68,7 @@
6768
:show-title="showTitle"
6869
:show-sub-title="showSubTitle"
6970
:to-date-animation="toDateAnimation"
71+
:first-day-of-week="firstDayOfWeek"
7072
ref="calendarRef"
7173
>
7274
<template v-slot:btn v-if="showTopBtn">
@@ -155,6 +157,11 @@ export default create({
155157
endDate: {
156158
type: String,
157159
default: Utils.getDay(365)
160+
},
161+
firstDayOfWeek: {
162+
type: Number,
163+
default: 0,
164+
validator: (val: number) => val >= 0 && val <= 6
158165
}
159166
},
160167
emits: ['choose', 'close', 'update:visible', 'select'],

‎src/packages/__VUE/calendaritem/index.h5.vue

+9-1
Original file line numberDiff line numberDiff line change
@@ -187,12 +187,18 @@ export default create({
187187
endDate: {
188188
type: String,
189189
default: Utils.getDay(365)
190+
},
191+
firstDayOfWeek: {
192+
type: Number,
193+
default: 0
190194
}
191195
},
192196
emits: ['choose', 'update', 'close', 'select'],
193197
194198
setup(props, { emit, slots }) {
195-
const weeks = ref(translate('weekdays'));
199+
// 新增：自定义周起始日
200+
const weekdays = translate('weekdays');
201+
const weeks = ref([...weekdays.slice(props.firstDayOfWeek, 7), ...weekdays.slice(0, props.firstDayOfWeek)]);
196202
// element refs
197203
const scalePx = ref(2);
198204
const months = ref<null | HTMLElement>(null);
@@ -398,6 +404,8 @@ export default create({
398404
399405
// 获取日期状态
400406
const getDaysStatus = (days: number, type: string, dateInfo: Dateprop) => {
407+
// 新增：自定义周起始日
408+
days = days - props.firstDayOfWeek;
401409
// 修复：当某个月的1号是周日时，月份下方会空出来一行
402410
let { year, month } = dateInfo;
403411
if (type == 'prev' && days >= 7) {

‎src/packages/__VUE/calendaritem/index.taro.vue

+9-1
Original file line numberDiff line numberDiff line change
@@ -178,12 +178,18 @@ export default create({
178178
endDate: {
179179
type: String,
180180
default: Utils.getDay(365)
181+
},
182+
firstDayOfWeek: {
183+
type: Number,
184+
default: 0
181185
}
182186
},
183187
emits: ['choose', 'update', 'close', 'select'],
184188
185189
setup(props, { emit, slots }) {
186-
const weeks = ref(translate('weekdays'));
190+
// 新增：自定义周起始日
191+
const weekdays = translate('weekdays');
192+
const weeks = ref([...weekdays.slice(props.firstDayOfWeek, 7), ...weekdays.slice(0, props.firstDayOfWeek)]);
187193
// element refs
188194
const scalePx = ref(2);
189195
const viewHeight = ref(0);
@@ -404,6 +410,8 @@ export default create({
404410
};
405411
// 获取上一个月的最后一周天数，填充当月空白
406412
const getPreDaysStatus = (days: number, type: string, dateInfo: any, preCurrMonthDays: number) => {
413+
// 新增：自定义周起始日
414+
days = days - props.firstDayOfWeek;
407415
// 修复：当某个月的1号是周日时，月份下方会空出来一行
408416
let { year, month } = dateInfo;
409417
if (type == 'prev' && days >= 7) {

0 commit comments

Comments
 (0)