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:
+21
-10
@@ -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);
|
||||||
|
|||||||
@@ -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');
|
||||||
|
|||||||
@@ -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
@@ -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
@@ -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);
|
||||||
|
|||||||
Reference in New Issue
Block a user