mirror of
https://github.com/tenrok/vue2-datepicker.git
synced 2026-06-10 04:12:26 +03:00
refactor: optimized code
This commit is contained in:
+21
-10
@@ -63,7 +63,7 @@
|
||||
import { getWeek, format } from 'date-format-parse';
|
||||
import IconButton from './icon-button';
|
||||
import { chunk } from '../util/base';
|
||||
import { createDate, getCalendar } from '../util/date';
|
||||
import { getCalendar, setMonth, setYear } from '../util/date';
|
||||
import { getLocale } from '../locale';
|
||||
|
||||
export default {
|
||||
@@ -141,22 +141,33 @@ export default {
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getNextCalendar(diffMonth) {
|
||||
const year = this.calendar.getFullYear();
|
||||
const month = this.calendar.getMonth();
|
||||
return createDate(year, month + diffMonth);
|
||||
},
|
||||
handleIconLeftClick() {
|
||||
this.$emit('changecalendar', this.getNextCalendar(-1), 'last-month');
|
||||
this.$emit(
|
||||
'changecalendar',
|
||||
setMonth(this.calendar, v => v - 1),
|
||||
'last-month'
|
||||
);
|
||||
},
|
||||
handleIconRightClick() {
|
||||
this.$emit('changecalendar', this.getNextCalendar(1), 'next-month');
|
||||
this.$emit(
|
||||
'changecalendar',
|
||||
setMonth(this.calendar, v => v + 1),
|
||||
'next-month'
|
||||
);
|
||||
},
|
||||
handleIconDoubleLeftClick() {
|
||||
this.$emit('changecalendar', this.getNextCalendar(-12), 'last-year');
|
||||
this.$emit(
|
||||
'changecalendar',
|
||||
setYear(this.calendar, v => v - 1),
|
||||
'last-year'
|
||||
);
|
||||
},
|
||||
handleIconDoubleRightClick() {
|
||||
this.$emit('changecalendar', this.getNextCalendar(12), 'next-year');
|
||||
this.$emit(
|
||||
'changecalendar',
|
||||
setYear(this.calendar, v => v + 1),
|
||||
'next-year'
|
||||
);
|
||||
},
|
||||
handlePanelChange(panel) {
|
||||
this.$emit('changepanel', panel);
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
import { chunk } from '../util/base';
|
||||
import IconButton from './icon-button';
|
||||
import { getLocale } from '../locale';
|
||||
import { createDate } from '../util/date';
|
||||
import { setYear } from '../util/date';
|
||||
|
||||
export default {
|
||||
name: 'TableMonth',
|
||||
@@ -72,16 +72,19 @@ export default {
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getNextCalendar(diffYear) {
|
||||
const year = this.calendar.getFullYear();
|
||||
const month = this.calendar.getMonth();
|
||||
return createDate(year + diffYear, month);
|
||||
},
|
||||
handleIconDoubleLeftClick() {
|
||||
this.$emit('changecalendar', this.getNextCalendar(-1), 'last-year');
|
||||
this.$emit(
|
||||
'changecalendar',
|
||||
setYear(this.calendar, v => v - 1),
|
||||
'last-year'
|
||||
);
|
||||
},
|
||||
handleIconDoubleRightClick() {
|
||||
this.$emit('changecalendar', this.getNextCalendar(1), 'next-year');
|
||||
this.$emit(
|
||||
'changecalendar',
|
||||
setYear(this.calendar, v => v + 1),
|
||||
'next-year'
|
||||
);
|
||||
},
|
||||
handlePanelChange() {
|
||||
this.$emit('changepanel', 'year');
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
<script>
|
||||
import IconButton from './icon-button';
|
||||
import { chunk } from '../util/base';
|
||||
import { createDate } from '../util/date';
|
||||
import { setYear } from '../util/date';
|
||||
|
||||
export default {
|
||||
name: 'TableYear',
|
||||
@@ -78,16 +78,19 @@ export default {
|
||||
}
|
||||
return chunk(years, 2);
|
||||
},
|
||||
getNextCalendar(diffYear) {
|
||||
const year = this.calendar.getFullYear();
|
||||
const month = this.calendar.getMonth();
|
||||
return createDate(year + diffYear, month);
|
||||
},
|
||||
handleIconDoubleLeftClick() {
|
||||
this.$emit('changecalendar', this.getNextCalendar(-10), 'last-decade');
|
||||
this.$emit(
|
||||
'changecalendar',
|
||||
setYear(this.calendar, v => v - 10),
|
||||
'last-decade'
|
||||
);
|
||||
},
|
||||
handleIconDoubleRightClick() {
|
||||
this.$emit('changecalendar', this.getNextCalendar(10), 'next-decade');
|
||||
this.$emit(
|
||||
'changecalendar',
|
||||
setYear(this.calendar, v => v + 10),
|
||||
'next-decade'
|
||||
);
|
||||
},
|
||||
handleClick(evt) {
|
||||
let { target } = evt;
|
||||
|
||||
+9
-8
@@ -284,20 +284,16 @@ export default {
|
||||
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 !== '')
|
||||
this.userInput = null;
|
||||
const value = Array.isArray(date) ? date.map(this.date2value) : this.date2value(date);
|
||||
this.$emit('input', value);
|
||||
this.$emit('change', value, type);
|
||||
this.afterEmitValue(type);
|
||||
return value;
|
||||
},
|
||||
afterEmitValue(type) {
|
||||
// this.type === 'datetime', click the time should close popup
|
||||
if (!type || type === this.type || type === 'time') {
|
||||
if (close) {
|
||||
this.closePopup();
|
||||
}
|
||||
return value;
|
||||
},
|
||||
isValidValue(value) {
|
||||
if (this.validMultipleType) {
|
||||
@@ -336,7 +332,12 @@ export default {
|
||||
if (this.confirm) {
|
||||
this.currentValue = val;
|
||||
} 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() {
|
||||
|
||||
+8
-1
@@ -77,7 +77,7 @@ export function getCalendar({ firstDayOfWeek, year, month }) {
|
||||
|
||||
export function setMonth(dirtyDate, dirtyMonth) {
|
||||
const date = new Date(dirtyDate);
|
||||
const month = Number(dirtyMonth);
|
||||
const month = typeof dirtyMonth === 'function' ? dirtyMonth(date.getMonth()) : Number(dirtyMonth);
|
||||
const year = date.getFullYear();
|
||||
const daysInMonth = createDate(year, month + 1, 0).getDate();
|
||||
const day = date.getDate();
|
||||
@@ -85,6 +85,13 @@ export function setMonth(dirtyDate, dirtyMonth) {
|
||||
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) {
|
||||
const date = new Date(target);
|
||||
const time = new Date(source);
|
||||
|
||||
Reference in New Issue
Block a user