2
0
mirror of https://github.com/tenrok/vue2-datepicker.git synced 2026-06-23 21:10:36 +03:00

refactor: optimized code

This commit is contained in:
mengxiong10
2021-09-21 09:42:09 +08:00
parent 8907810e8a
commit cc3ec5f280
5 changed files with 60 additions and 35 deletions
+21 -10
View File
@@ -63,7 +63,7 @@
import { getWeek, format } from 'date-format-parse'; import { getWeek, format } from 'date-format-parse';
import IconButton from './icon-button'; import IconButton from './icon-button';
import { chunk } from '../util/base'; import { chunk } from '../util/base';
import { createDate, getCalendar } from '../util/date'; import { getCalendar, setMonth, setYear } from '../util/date';
import { getLocale } from '../locale'; import { getLocale } from '../locale';
export default { export default {
@@ -141,22 +141,33 @@ export default {
}, },
}, },
methods: { methods: {
getNextCalendar(diffMonth) {
const year = this.calendar.getFullYear();
const month = this.calendar.getMonth();
return createDate(year, month + diffMonth);
},
handleIconLeftClick() { handleIconLeftClick() {
this.$emit('changecalendar', this.getNextCalendar(-1), 'last-month'); this.$emit(
'changecalendar',
setMonth(this.calendar, v => v - 1),
'last-month'
);
}, },
handleIconRightClick() { handleIconRightClick() {
this.$emit('changecalendar', this.getNextCalendar(1), 'next-month'); this.$emit(
'changecalendar',
setMonth(this.calendar, v => v + 1),
'next-month'
);
}, },
handleIconDoubleLeftClick() { handleIconDoubleLeftClick() {
this.$emit('changecalendar', this.getNextCalendar(-12), 'last-year'); this.$emit(
'changecalendar',
setYear(this.calendar, v => v - 1),
'last-year'
);
}, },
handleIconDoubleRightClick() { handleIconDoubleRightClick() {
this.$emit('changecalendar', this.getNextCalendar(12), 'next-year'); this.$emit(
'changecalendar',
setYear(this.calendar, v => v + 1),
'next-year'
);
}, },
handlePanelChange(panel) { handlePanelChange(panel) {
this.$emit('changepanel', panel); this.$emit('changepanel', panel);
+11 -8
View File
@@ -35,7 +35,7 @@
import { chunk } from '../util/base'; import { chunk } from '../util/base';
import IconButton from './icon-button'; import IconButton from './icon-button';
import { getLocale } from '../locale'; import { getLocale } from '../locale';
import { createDate } from '../util/date'; import { setYear } from '../util/date';
export default { export default {
name: 'TableMonth', name: 'TableMonth',
@@ -72,16 +72,19 @@ export default {
}, },
}, },
methods: { methods: {
getNextCalendar(diffYear) {
const year = this.calendar.getFullYear();
const month = this.calendar.getMonth();
return createDate(year + diffYear, month);
},
handleIconDoubleLeftClick() { handleIconDoubleLeftClick() {
this.$emit('changecalendar', this.getNextCalendar(-1), 'last-year'); this.$emit(
'changecalendar',
setYear(this.calendar, v => v - 1),
'last-year'
);
}, },
handleIconDoubleRightClick() { handleIconDoubleRightClick() {
this.$emit('changecalendar', this.getNextCalendar(1), 'next-year'); this.$emit(
'changecalendar',
setYear(this.calendar, v => v + 1),
'next-year'
);
}, },
handlePanelChange() { handlePanelChange() {
this.$emit('changepanel', 'year'); this.$emit('changepanel', 'year');
+11 -8
View File
@@ -30,7 +30,7 @@
<script> <script>
import IconButton from './icon-button'; import IconButton from './icon-button';
import { chunk } from '../util/base'; import { chunk } from '../util/base';
import { createDate } from '../util/date'; import { setYear } from '../util/date';
export default { export default {
name: 'TableYear', name: 'TableYear',
@@ -78,16 +78,19 @@ export default {
} }
return chunk(years, 2); return chunk(years, 2);
}, },
getNextCalendar(diffYear) {
const year = this.calendar.getFullYear();
const month = this.calendar.getMonth();
return createDate(year + diffYear, month);
},
handleIconDoubleLeftClick() { handleIconDoubleLeftClick() {
this.$emit('changecalendar', this.getNextCalendar(-10), 'last-decade'); this.$emit(
'changecalendar',
setYear(this.calendar, v => v - 10),
'last-decade'
);
}, },
handleIconDoubleRightClick() { handleIconDoubleRightClick() {
this.$emit('changecalendar', this.getNextCalendar(10), 'next-decade'); this.$emit(
'changecalendar',
setYear(this.calendar, v => v + 10),
'next-decade'
);
}, },
handleClick(evt) { handleClick(evt) {
let { target } = evt; let { target } = evt;
+9 -8
View File
@@ -284,20 +284,16 @@ export default {
return this.formatDate(date, this.valueType); return this.formatDate(date, this.valueType);
} }
}, },
emitValue(date, type) { emitValue(date, type, close = true) {
// fix IE11/10 trigger input event when input is focused. (placeholder !== '') // fix IE11/10 trigger input event when input is focused. (placeholder !== '')
this.userInput = null; this.userInput = null;
const value = Array.isArray(date) ? date.map(this.date2value) : this.date2value(date); const value = Array.isArray(date) ? date.map(this.date2value) : this.date2value(date);
this.$emit('input', value); this.$emit('input', value);
this.$emit('change', value, type); this.$emit('change', value, type);
this.afterEmitValue(type); if (close) {
return value;
},
afterEmitValue(type) {
// this.type === 'datetime', click the time should close popup
if (!type || type === this.type || type === 'time') {
this.closePopup(); this.closePopup();
} }
return value;
}, },
isValidValue(value) { isValidValue(value) {
if (this.validMultipleType) { if (this.validMultipleType) {
@@ -336,7 +332,12 @@ export default {
if (this.confirm) { if (this.confirm) {
this.currentValue = val; this.currentValue = val;
} else { } else {
this.emitValue(val, this.validMultipleType ? `multiple-${type}` : type); this.emitValue(
val,
type,
// this.type === 'datetime', click the time should close popup
!this.validMultipleType && (type === this.type || type === 'time')
);
} }
}, },
clear() { clear() {
+8 -1
View File
@@ -77,7 +77,7 @@ export function getCalendar({ firstDayOfWeek, year, month }) {
export function setMonth(dirtyDate, dirtyMonth) { export function setMonth(dirtyDate, dirtyMonth) {
const date = new Date(dirtyDate); const date = new Date(dirtyDate);
const month = Number(dirtyMonth); const month = typeof dirtyMonth === 'function' ? dirtyMonth(date.getMonth()) : Number(dirtyMonth);
const year = date.getFullYear(); const year = date.getFullYear();
const daysInMonth = createDate(year, month + 1, 0).getDate(); const daysInMonth = createDate(year, month + 1, 0).getDate();
const day = date.getDate(); const day = date.getDate();
@@ -85,6 +85,13 @@ export function setMonth(dirtyDate, dirtyMonth) {
return date; return date;
} }
export function setYear(dirtyDate, dirtyYear) {
const date = new Date(dirtyDate);
const year = typeof dirtyYear === 'function' ? dirtyYear(date.getFullYear()) : dirtyYear;
date.setFullYear(year);
return date;
}
export function assignTime(target, source) { export function assignTime(target, source) {
const date = new Date(target); const date = new Date(target);
const time = new Date(source); const time = new Date(source);