Skip to content

Commit 07f4271

Browse files
mengxiong10mengxiong10
committed
feat: add prop partial-update
Determine whether update date when select year of month. The default value is false.
1 parent fe323df commit 07f4271

11 files changed

+143
-92
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,7 @@ You can also override some of the default locale by `lang`.
121121
| popup-class | popup classes | | — |
122122
| shortcuts | set shortcuts to select | `Array<{text, onClick}>` | - |
123123
| title-format | format of the tooltip in calendar cell | [token](#token) | 'YYYY-MM-DD' |
124+
| partial-update | whether update date when select year or month | `boolean` | false |
124125
| range-separator | text of range separator | `string` | ' ~ ' |
125126
| show-week-number | determine whether show week number | `boolean` | false |
126127
| hour-step | interval between hours in time picker | 1 - 60 | 1 |

‎README.zh-CN.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,7 @@ import 'vue2-datepicker/locale/zh-cn';
119119
| popup-class | 弹出层的类 | | — |
120120
| shortcuts | 设置快捷选择 | `Array<{text, onClick}>` | - |
121121
| title-format | 日历单元格的 tooltip | [token](#token) | 'YYYY-MM-DD' |
122+
| partial-update | 是否更新日期当选择年或月的时候 | `boolean` | false |
122123
| range-separator | 范围分隔符 | `string` | ' ~ ' |
123124
| show-week-number | 是否显示星期数字 | `boolean` | false |
124125
| hour-step | 小时列的间隔 | 1 - 60 | 1 |

‎__test__/__snapshots__/calendar-panel.test.js.snap

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -14,51 +14,51 @@ exports[`CalendarPanel prop: type=date 1`] = `
1414
class="mx-icon-double-left"
1515
/>
1616
</button>
17-
17+
1818
<button
1919
class="mx-btn mx-btn-text mx-btn-icon-left"
2020
>
2121
<i
2222
class="mx-icon-left"
2323
/>
2424
</button>
25-
25+
2626
<button
2727
class="mx-btn mx-btn-text mx-btn-icon-double-right"
2828
>
2929
<i
3030
class="mx-icon-double-right"
3131
/>
3232
</button>
33-
33+
3434
<button
3535
class="mx-btn mx-btn-text mx-btn-icon-right"
3636
>
3737
<i
3838
class="mx-icon-right"
3939
/>
4040
</button>
41-
41+
4242
<span
4343
class="mx-calendar-header-label"
4444
>
4545
<button
4646
class="mx-btn mx-btn-text mx-btn-current-month"
4747
>
48-
48+
4949
Oct
50-
50+
5151
</button>
5252
<button
5353
class="mx-btn mx-btn-text mx-btn-current-year"
5454
>
55-
55+
5656
2019
57-
57+
5858
</button>
5959
</span>
6060
</div>
61-
61+
6262
<div
6363
class="mx-calendar-content"
6464
>
@@ -67,12 +67,12 @@ exports[`CalendarPanel prop: type=date 1`] = `
6767
getcellclasses="function () { [native code] }"
6868
style="display: none;"
6969
/>
70-
70+
7171
<table-month-stub
7272
getcellclasses="function () { [native code] }"
7373
style="display: none;"
7474
/>
75-
75+
7676
<table-date-stub
7777
calendarmonth="9"
7878
calendaryear="2019"
@@ -98,7 +98,7 @@ exports[`CalendarPanel prop: type=month 1`] = `
9898
class="mx-icon-double-left"
9999
/>
100100
</button>
101-
101+
102102
<button
103103
class="mx-btn mx-btn-text mx-btn-icon-left"
104104
style="display: none;"
@@ -107,15 +107,15 @@ exports[`CalendarPanel prop: type=month 1`] = `
107107
class="mx-icon-left"
108108
/>
109109
</button>
110-
110+
111111
<button
112112
class="mx-btn mx-btn-text mx-btn-icon-double-right"
113113
>
114114
<i
115115
class="mx-icon-double-right"
116116
/>
117117
</button>
118-
118+
119119
<button
120120
class="mx-btn mx-btn-text mx-btn-icon-right"
121121
style="display: none;"
@@ -124,20 +124,20 @@ exports[`CalendarPanel prop: type=month 1`] = `
124124
class="mx-icon-right"
125125
/>
126126
</button>
127-
127+
128128
<span
129129
class="mx-calendar-header-label"
130130
>
131131
<button
132132
class="mx-btn mx-btn-text"
133133
>
134-
134+
135135
2019
136-
136+
137137
</button>
138138
</span>
139139
</div>
140-
140+
141141
<div
142142
class="mx-calendar-content"
143143
>
@@ -146,11 +146,11 @@ exports[`CalendarPanel prop: type=month 1`] = `
146146
getcellclasses="function () { [native code] }"
147147
style="display: none;"
148148
/>
149-
149+
150150
<table-month-stub
151151
getcellclasses="function () { [native code] }"
152152
/>
153-
153+
154154
<!---->
155155
</div>
156156
</div>
@@ -170,7 +170,7 @@ exports[`CalendarPanel prop: type=year 1`] = `
170170
class="mx-icon-double-left"
171171
/>
172172
</button>
173-
173+
174174
<button
175175
class="mx-btn mx-btn-text mx-btn-icon-left"
176176
style="display: none;"
@@ -179,15 +179,15 @@ exports[`CalendarPanel prop: type=year 1`] = `
179179
class="mx-icon-left"
180180
/>
181181
</button>
182-
182+
183183
<button
184184
class="mx-btn mx-btn-text mx-btn-icon-double-right"
185185
>
186186
<i
187187
class="mx-icon-double-right"
188188
/>
189189
</button>
190-
190+
191191
<button
192192
class="mx-btn mx-btn-text mx-btn-icon-right"
193193
style="display: none;"
@@ -196,34 +196,34 @@ exports[`CalendarPanel prop: type=year 1`] = `
196196
class="mx-icon-right"
197197
/>
198198
</button>
199-
199+
200200
<span
201201
class="mx-calendar-header-label"
202202
>
203203
<span>
204204
2010
205205
</span>
206-
206+
207207
<span
208208
class="mx-calendar-decade-separator"
209209
/>
210-
210+
211211
<span>
212212
2019
213213
</span>
214214
</span>
215215
</div>
216-
216+
217217
<div
218218
class="mx-calendar-content"
219219
>
220220
<table-year-stub
221221
decade="2010"
222222
getcellclasses="function () { [native code] }"
223223
/>
224-
224+
225225
<!---->
226-
226+
227227
<!---->
228228
</div>
229229
</div>

‎__test__/calendar-panel.test.js

Lines changed: 57 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -64,43 +64,6 @@ describe('CalendarPanel', () => {
6464
expect(td.classes()).toContain('active');
6565
});
6666

67-
const renderType = type => {
68-
it(`prop: type=${type}`, () => {
69-
wrapper = shallowMount(CalendarPanel, {
70-
propsData: {
71-
type,
72-
value: new Date(2019, 9, 1, 10),
73-
},
74-
});
75-
expect(wrapper.element).toMatchSnapshot();
76-
});
77-
};
78-
['date', 'month', 'year'].forEach(renderType);
79-
80-
it('prop: disabledDate', () => {
81-
const disabledDate = date => {
82-
return date < new Date(2019, 9, 1) || date > new Date(2019, 9, 20);
83-
};
84-
wrapper = mount(CalendarPanel, {
85-
propsData: {
86-
value: new Date(2019, 9, 4),
87-
disabledDate,
88-
},
89-
});
90-
const tds = wrapper.findAll('.mx-table-date td');
91-
for (let i = 0; i < 42; i++) {
92-
const td = tds.at(i);
93-
const classes = td.classes();
94-
if (i < 2 || i > 21) {
95-
expect(classes).toContain('disabled');
96-
} else {
97-
expect(classes).not.toContain('disabled');
98-
}
99-
}
100-
tds.at(1).trigger('click');
101-
expect(wrapper.emitted().select).toBeUndefined();
102-
});
103-
10467
it('feat: click prev/next month', () => {
10568
wrapper = shallowMount(CalendarPanel);
10669

@@ -167,4 +130,61 @@ describe('CalendarPanel', () => {
167130
lastBtn.trigger('click');
168131
expect(vm.calendarDecade).toBe(2000);
169132
});
133+
134+
const renderType = type => {
135+
it(`prop: type=${type}`, () => {
136+
wrapper = shallowMount(CalendarPanel, {
137+
propsData: {
138+
type,
139+
value: new Date(2019, 9, 1, 10),
140+
},
141+
});
142+
expect(wrapper.element).toMatchSnapshot();
143+
});
144+
};
145+
['date', 'month', 'year'].forEach(renderType);
146+
147+
it('prop: disabledDate', () => {
148+
const disabledDate = date => {
149+
return date < new Date(2019, 9, 1) || date > new Date(2019, 9, 20);
150+
};
151+
wrapper = mount(CalendarPanel, {
152+
propsData: {
153+
value: new Date(2019, 9, 4),
154+
disabledDate,
155+
},
156+
});
157+
const tds = wrapper.findAll('.mx-table-date td');
158+
for (let i = 0; i < 42; i++) {
159+
const td = tds.at(i);
160+
const classes = td.classes();
161+
if (i < 2 || i > 21) {
162+
expect(classes).toContain('disabled');
163+
} else {
164+
expect(classes).not.toContain('disabled');
165+
}
166+
}
167+
tds.at(1).trigger('click');
168+
expect(wrapper.emitted().select).toBeUndefined();
169+
});
170+
171+
it('prop: partialUpdate', () => {
172+
wrapper = mount(CalendarPanel, {
173+
propsData: {
174+
value: new Date(2019, 9, 4),
175+
partialUpdate: true,
176+
},
177+
});
178+
wrapper
179+
.findAll('.mx-table-year td > div')
180+
.at(0)
181+
.trigger('click');
182+
expect(wrapper.emitted().select[0][0]).toEqual(new Date(2010, 9, 4));
183+
wrapper.setProps({ value: new Date(2010, 9, 4) });
184+
wrapper
185+
.findAll('.mx-table-month td > div')
186+
.at(0)
187+
.trigger('click');
188+
expect(wrapper.emitted().select[1][0]).toEqual(new Date(2010, 0, 4));
189+
});
170190
});

‎__test__/calendar-range.test.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,4 +63,17 @@ describe('CalendarRange', () => {
6363
await flushPromises();
6464
expect(wrapper.vm.calendars).toEqual([new Date(2019, 6, 1), new Date(2019, 7, 1)]);
6565
});
66+
67+
it('partialUpdate should be false', () => {
68+
wrapper = mount(CalendarRange, {
69+
propsData: {
70+
partialUpdate: true,
71+
},
72+
});
73+
const panels = wrapper.findAll(CalendarPanel);
74+
const startPanel = panels.at(0);
75+
const endPanel = panels.at(1);
76+
expect(startPanel.vm.partialUpdate).toBe(false);
77+
expect(endPanel.vm.partialUpdate).toBe(false);
78+
});
6679
});

‎__test__/datetime-panel.test.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ describe('DatetimePanel', () => {
1111
it('feat: click date', () => {
1212
wrapper = mount(DatetimePanel, {
1313
propsData: {
14+
type: 'datetime',
1415
defaultValue: new Date(2019, 9, 1, 12),
1516
},
1617
});

‎__test__/datetime-range.test.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ describe('DatetimeRange', () => {
1313
wrapper = mount(DatetimeRange, {
1414
sync: false,
1515
propsData: {
16+
type: 'datetime',
1617
value: [new Date(2019, 9, 4, 18), new Date(2019, 9, 6, 12)],
1718
},
1819
});

‎src/calendar/calendar-panel.vue

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,11 @@ export default {
146146
default: 'YYYY-MM-DD',
147147
},
148148
calendar: Date,
149+
// update date when select year or month
150+
partialUpdate: {
151+
type: Boolean,
152+
default: false,
153+
},
149154
},
150155
data() {
151156
const panels = ['date', 'year', 'month'];
@@ -252,6 +257,10 @@ export default {
252257
const nextCalendar = setYear(this.innerCalendar, year);
253258
this.updateCalendar(nextCalendar);
254259
this.handelPanelChange('month');
260+
if (this.partialUpdate && this.innerValue[0]) {
261+
const date = setYear(this.innerValue[0], year);
262+
this.emitDate(date, 'year');
263+
}
255264
}
256265
},
257266
handleSelectMonth(month) {
@@ -262,6 +271,10 @@ export default {
262271
const nextCalendar = setMonth(this.innerCalendar, month);
263272
this.updateCalendar(nextCalendar);
264273
this.handelPanelChange('date');
274+
if (this.partialUpdate && this.innerValue[0]) {
275+
const date = setMonth(setYear(this.innerValue[0], this.calendarYear), month);
276+
this.emitDate(date, 'month');
277+
}
265278
}
266279
},
267280
handleSelectDate(day) {

0 commit comments

Comments
 (0)