mirrors/vue2-datepicker
2
0
Fork 0
mirror of https://github.com/tenrok/vue2-datepicker.git synced 2026-06-23 20:50:37 +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> </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`] = ` exports[`DatePicker prop: editable 1`] = `
<div <div
class="mx-datepicker" class="mx-datepicker"
__test__/date-picker.test.js
+8 -1
View File
@@ -136,10 +136,12 @@ describe('DatePicker', () => {
}); });
it('prop: custom format', () => { it('prop: custom format', () => {
wrapper = shallowMount(DatePicker, { wrapper = mount(DatePicker, {
propsData: { propsData: {
valueType: 'format', valueType: 'format',
value: '13/10/2019', value: '13/10/2019',
open: true,
type: 'week',
format: { format: {
stringify(date) { stringify(date) {
return format(date, 'dd/MM/yyyy'); return format(date, 'dd/MM/yyyy');
@@ -147,11 +149,16 @@ describe('DatePicker', () => {
parse(value) { parse(value) {
return parse(value, 'dd/MM/yyyy', new Date()); return parse(value, 'dd/MM/yyyy', new Date());
}, },
getWeek(date) {
return date.getDate();
},
}, },
}, },
}); });
const input = wrapper.find('input').element; const input = wrapper.find('input').element;
expect(input.value).toBe('13/10/2019'); expect(input.value).toBe('13/10/2019');
const tableDate = wrapper.find('.mx-table-date');
expect(tableDate.element).toMatchSnapshot();
}); });
it('prop: valueType', () => { it('prop: valueType', () => {
src/calendar/table-date.vue
+6 -1
View File
@@ -36,6 +36,11 @@ import { createDate } from '../util/date';
export default { export default {
name: 'TableDate', name: 'TableDate',
mixins: [localeMixin, formatMixin], mixins: [localeMixin, formatMixin],
inject: {
getWeek: {
default: getWeek,
},
},
props: { props: {
calendarYear: { calendarYear: {
type: Number, type: Number,
@@ -132,7 +137,7 @@ export default {
const year = this.calendarYear; const year = this.calendarYear;
const month = this.calendarMonth; const month = this.calendarMonth;
const date = createDate(year, month, day); const date = createDate(year, month, day);
return getWeek(date, this.t('formatLocale')); return this.getWeek(date, this.t('formatLocale'));
}, },
}, },
}; };
src/date-picker.vue
+8 -1
View File
@@ -86,7 +86,7 @@
</template> </template>
<script> <script>
import { parse, format } from 'date-format-parse'; import { parse, format, getWeek } from 'date-format-parse';
import { isValidDate, isValidRangeDate, getValidDate } from './util/date'; import { isValidDate, isValidRangeDate, getValidDate } from './util/date';
import { pick, isObject, mergeDeep } from './util/base'; import { pick, isObject, mergeDeep } from './util/base';
import { getLocale } from './locale'; import { getLocale } from './locale';
@@ -121,6 +121,7 @@ export default {
provide() { provide() {
return { return {
locale: this.locale, locale: this.locale,
getWeek: this.getWeek,
}; };
}, },
props: { props: {
@@ -295,6 +296,12 @@ export default {
this.closePopup(); this.closePopup();
} }
}, },
getWeek(date, options) {
if (isObject(this.format) && typeof this.format.getWeek === 'function') {
return this.format.getWeek(date, options);
}
return getWeek(date, options);
},
parseDate(value, fmt) { parseDate(value, fmt) {
if (isObject(this.format) && typeof this.format.parse === 'function') { if (isObject(this.format) && typeof this.format.parse === 'function') {
return this.format.parse(value, fmt); return this.format.parse(value, fmt);