mirrors/vue2-datepicker
2
0
Fork 0
mirror of https://github.com/tenrok/vue2-datepicker.git synced 2026-06-21 15:00:36 +03:00
Code Activity

feat: add getWeek in custom format (#382)

Browse Source
This commit is contained in:
mengxiong10
2019-11-29 15:19:12 +08:00
parent 0a3174569b
commit 4d935d7e24
4 changed files with 511 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
__test__/__snapshots__/date-picker.test.js.snap
+489
View File
@@ -92,6 +92,495 @@ exports[`DatePicker prop: clearable 1`] = `
</div>
`;
exports[`DatePicker prop: custom format 1`] = `
<table
class="mx-table mx-table-date"
>
<thead>
<tr>
<th
class="mx-week-number-header"
/>
<th>
Su
</th>
<th>
Mo
</th>
<th>
Tu
</th>
<th>
We
</th>
<th>
Th
</th>
<th>
Fr
</th>
<th>
Sa
</th>
</tr>
</thead>
<tbody>
<tr
class="mx-date-row"
>
<td
class="mx-week-number"
>
29
</td>
<td
class="cell not-current-month"
data-day="-1"
title="2019-09-29"
>
<div>
29
</div>
</td>
<td
class="cell not-current-month"
data-day="0"
title="2019-09-30"
>
<div>
30
</div>
</td>
<td
class="cell"
data-day="1"
title="2019-10-01"
>
<div>
1
</div>
</td>
<td
class="cell"
data-day="2"
title="2019-10-02"
>
<div>
2
</div>
</td>
<td
class="cell"
data-day="3"
title="2019-10-03"
>
<div>
3
</div>
</td>
<td
class="cell"
data-day="4"
title="2019-10-04"
>
<div>
4
</div>
</td>
<td
class="cell"
data-day="5"
title="2019-10-05"
>
<div>
5
</div>
</td>
</tr>
<tr
class="mx-date-row"
>
<td
class="mx-week-number"
>
6
</td>
<td
class="cell"
data-day="6"
title="2019-10-06"
>
<div>
6
</div>
</td>
<td
class="cell"
data-day="7"
title="2019-10-07"
>
<div>
7
</div>
</td>
<td
class="cell"
data-day="8"
title="2019-10-08"
>
<div>
8
</div>
</td>
<td
class="cell"
data-day="9"
title="2019-10-09"
>
<div>
9
</div>
</td>
<td
class="cell"
data-day="10"
title="2019-10-10"
>
<div>
10
</div>
</td>
<td
class="cell"
data-day="11"
title="2019-10-11"
>
<div>
11
</div>
</td>
<td
class="cell"
data-day="12"
title="2019-10-12"
>
<div>
12
</div>
</td>
</tr>
<tr
class="mx-date-row mx-active-week"
>
<td
class="mx-week-number"
>
13
</td>
<td
class="cell active"
data-day="13"
title="2019-10-13"
>
<div>
13
</div>
</td>
<td
class="cell"
data-day="14"
title="2019-10-14"
>
<div>
14
</div>
</td>
<td
class="cell"
data-day="15"
title="2019-10-15"
>
<div>
15
</div>
</td>
<td
class="cell"
data-day="16"
title="2019-10-16"
>
<div>
16
</div>
</td>
<td
class="cell"
data-day="17"
title="2019-10-17"
>
<div>
17
</div>
</td>
<td
class="cell"
data-day="18"
title="2019-10-18"
>
<div>
18
</div>
</td>
<td
class="cell"
data-day="19"
title="2019-10-19"
>
<div>
19
</div>
</td>
</tr>
<tr
class="mx-date-row"
>
<td
class="mx-week-number"
>
20
</td>
<td
class="cell"
data-day="20"
title="2019-10-20"
>
<div>
20
</div>
</td>
<td
class="cell"
data-day="21"
title="2019-10-21"
>
<div>
21
</div>
</td>
<td
class="cell"
data-day="22"
title="2019-10-22"
>
<div>
22
</div>
</td>
<td
class="cell"
data-day="23"
title="2019-10-23"
>
<div>
23
</div>
</td>
<td
class="cell"
data-day="24"
title="2019-10-24"
>
<div>
24
</div>
</td>
<td
class="cell"
data-day="25"
title="2019-10-25"
>
<div>
25
</div>
</td>
<td
class="cell"
data-day="26"
title="2019-10-26"
>
<div>
26
</div>
</td>
</tr>
<tr
class="mx-date-row"
>
<td
class="mx-week-number"
>
27
</td>
<td
class="cell"
data-day="27"
title="2019-10-27"
>
<div>
27
</div>
</td>
<td
class="cell"
data-day="28"
title="2019-10-28"
>
<div>
28
</div>
</td>
<td
class="cell"
data-day="29"
title="2019-10-29"
>
<div>
29
</div>
</td>
<td
class="cell"
data-day="30"
title="2019-10-30"
>
<div>
30
</div>
</td>
<td
class="cell"
data-day="31"
title="2019-10-31"
>
<div>
31
</div>
</td>
<td
class="cell not-current-month"
data-day="32"
title="2019-11-01"
>
<div>
1
</div>
</td>
<td
class="cell not-current-month"
data-day="33"
title="2019-11-02"
>
<div>
2
</div>
</td>
</tr>
<tr
class="mx-date-row"
>
<td
class="mx-week-number"
>
3
</td>
<td
class="cell not-current-month"
data-day="34"
title="2019-11-03"
>
<div>
3
</div>
</td>
<td
class="cell not-current-month"
data-day="35"
title="2019-11-04"
>
<div>
4
</div>
</td>
<td
class="cell not-current-month"
data-day="36"
title="2019-11-05"
>
<div>
5
</div>
</td>
<td
class="cell not-current-month"
data-day="37"
title="2019-11-06"
>
<div>
6
</div>
</td>
<td
class="cell not-current-month"
data-day="38"
title="2019-11-07"
>
<div>
7
</div>
</td>
<td
class="cell not-current-month"
data-day="39"
title="2019-11-08"
>
<div>
8
</div>
</td>
<td
class="cell not-current-month"
data-day="40"
title="2019-11-09"
>
<div>
9
</div>
</td>
</tr>
</tbody>
</table>
`;
exports[`DatePicker prop: editable 1`] = `
<div
class="mx-datepicker"
__test__/date-picker.test.js
+8 -1
View File
@@ -136,10 +136,12 @@ describe('DatePicker', () => {
});
it('prop: custom format', () => {
wrapper = shallowMount(DatePicker, {
wrapper = mount(DatePicker, {
propsData: {
valueType: 'format',
value: '13/10/2019',
open: true,
type: 'week',
format: {
stringify(date) {
return format(date, 'dd/MM/yyyy');
@@ -147,11 +149,16 @@ describe('DatePicker', () => {
parse(value) {
return parse(value, 'dd/MM/yyyy', new Date());
},
getWeek(date) {
return date.getDate();
},
},
},
});
const input = wrapper.find('input').element;
expect(input.value).toBe('13/10/2019');
const tableDate = wrapper.find('.mx-table-date');
expect(tableDate.element).toMatchSnapshot();
});
it('prop: valueType', () => {