|
|
@@ -91,6 +91,7 @@
|
|
|
@click="leftPrevYear"
|
|
|
class="el-picker-panel__icon-btn el-icon-d-arrow-left"></button>
|
|
|
<button
|
|
|
+ v-show="canShowLeftDatePanel"
|
|
|
type="button"
|
|
|
@click="leftPrevMonth"
|
|
|
class="el-picker-panel__icon-btn el-icon-arrow-left"></button>
|
|
|
@@ -104,13 +105,26 @@
|
|
|
<button
|
|
|
type="button"
|
|
|
@click="leftNextMonth"
|
|
|
- v-if="unlinkPanels"
|
|
|
+ v-if="unlinkPanels && canShowLeftDatePanel"
|
|
|
:disabled="!enableMonthArrow"
|
|
|
:class="{ 'is-disabled': !enableMonthArrow }"
|
|
|
class="el-picker-panel__icon-btn el-icon-arrow-right"></button>
|
|
|
- <div>{{ leftLabel }}</div>
|
|
|
+ <div v-if="!rangeLabelClick">{{ leftLabel }}</div>
|
|
|
+ <div v-else>
|
|
|
+ <span
|
|
|
+ @click="showYearPicker('left')"
|
|
|
+ role="button"
|
|
|
+ class="el-date-picker__header-label">{{ leftYearLabel }}</span>
|
|
|
+ <span
|
|
|
+ @click="showMonthPicker('left')"
|
|
|
+ v-show="canShowLeftDatePanel"
|
|
|
+ role="button"
|
|
|
+ class="el-date-picker__header-label"
|
|
|
+ :class="{ active: currentView === 'left-month' }">{{t(`el.datepicker.month${ leftMonth + 1 }`)}}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<date-table
|
|
|
+ v-show="canShowLeftDatePanel"
|
|
|
selection-mode="range"
|
|
|
:date="leftDate"
|
|
|
:default-value="defaultValue"
|
|
|
@@ -123,6 +137,22 @@
|
|
|
:first-day-of-week="firstDayOfWeek"
|
|
|
@pick="handleRangePick">
|
|
|
</date-table>
|
|
|
+ <year-table
|
|
|
+ v-show="currentView === 'left-year'"
|
|
|
+ @pick="handleYearPick($event, 'left')"
|
|
|
+ :selection-mode="selectionMode"
|
|
|
+ :default-value="defaultValue ? new Date(defaultValue) : null"
|
|
|
+ :date="leftDate"
|
|
|
+ :disabled-date="disabledDate">
|
|
|
+ </year-table>
|
|
|
+ <month-table
|
|
|
+ v-show="currentView === 'left-month'"
|
|
|
+ @pick="handleMonthPick($event, 'left')"
|
|
|
+ :selection-mode="selectionMode"
|
|
|
+ :default-value="defaultValue ? new Date(defaultValue) : null"
|
|
|
+ :date="leftDate"
|
|
|
+ :disabled-date="disabledDate">
|
|
|
+ </month-table>
|
|
|
</div>
|
|
|
<div class="el-picker-panel__content el-date-range-picker__content is-right">
|
|
|
<div class="el-date-range-picker__header">
|
|
|
@@ -136,7 +166,7 @@
|
|
|
<button
|
|
|
type="button"
|
|
|
@click="rightPrevMonth"
|
|
|
- v-if="unlinkPanels"
|
|
|
+ v-if="unlinkPanels && canShowRightDatePanel"
|
|
|
:disabled="!enableMonthArrow"
|
|
|
:class="{ 'is-disabled': !enableMonthArrow }"
|
|
|
class="el-picker-panel__icon-btn el-icon-arrow-left"></button>
|
|
|
@@ -145,12 +175,26 @@
|
|
|
@click="rightNextYear"
|
|
|
class="el-picker-panel__icon-btn el-icon-d-arrow-right"></button>
|
|
|
<button
|
|
|
+ v-show="canShowRightDatePanel"
|
|
|
type="button"
|
|
|
@click="rightNextMonth"
|
|
|
class="el-picker-panel__icon-btn el-icon-arrow-right"></button>
|
|
|
- <div>{{ rightLabel }}</div>
|
|
|
+ <div v-if="!rangeLabelClick">{{ rightLabel }}</div>
|
|
|
+ <div v-else>
|
|
|
+ <span
|
|
|
+ @click="showYearPicker('right')"
|
|
|
+ role="button"
|
|
|
+ class="el-date-picker__header-label">{{ rightYearLabel }}</span>
|
|
|
+ <span
|
|
|
+ @click="showMonthPicker('right')"
|
|
|
+ v-show="canShowRightDatePanel"
|
|
|
+ role="button"
|
|
|
+ class="el-date-picker__header-label"
|
|
|
+ :class="{ active: currentView === 'right-month' }">{{t(`el.datepicker.month${ rightMonth + 1 }`)}}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<date-table
|
|
|
+ v-show="canShowRightDatePanel"
|
|
|
selection-mode="range"
|
|
|
:date="rightDate"
|
|
|
:default-value="defaultValue"
|
|
|
@@ -163,6 +207,22 @@
|
|
|
:first-day-of-week="firstDayOfWeek"
|
|
|
@pick="handleRangePick">
|
|
|
</date-table>
|
|
|
+ <year-table
|
|
|
+ v-show="currentView === 'right-year'"
|
|
|
+ @pick="handleYearPick($event, 'right')"
|
|
|
+ :selection-mode="selectionMode"
|
|
|
+ :default-value="defaultValue ? new Date(defaultValue) : null"
|
|
|
+ :date="rightDate"
|
|
|
+ :disabled-date="disabledDate">
|
|
|
+ </year-table>
|
|
|
+ <month-table
|
|
|
+ v-show="currentView === 'right-month'"
|
|
|
+ @pick="handleMonthPick($event, 'right')"
|
|
|
+ :selection-mode="selectionMode"
|
|
|
+ :default-value="defaultValue ? new Date(defaultValue) : null"
|
|
|
+ :date="rightDate"
|
|
|
+ :disabled-date="disabledDate">
|
|
|
+ </month-table>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -200,12 +260,15 @@
|
|
|
prevMonth,
|
|
|
nextMonth,
|
|
|
nextDate,
|
|
|
+ changeYearMonthAndClampDate,
|
|
|
extractDateFormat,
|
|
|
extractTimeFormat
|
|
|
} from 'element-ui/src/utils/date-util';
|
|
|
import Clickoutside from 'element-ui/src/utils/clickoutside';
|
|
|
import Locale from 'element-ui/src/mixins/locale';
|
|
|
import TimePicker from './time';
|
|
|
+ import YearTable from '../basic/year-table';
|
|
|
+ import MonthTable from '../basic/month-table';
|
|
|
import DateTable from '../basic/date-table';
|
|
|
import ElInput from 'element-ui/packages/input';
|
|
|
import ElButton from 'element-ui/packages/button';
|
|
|
@@ -250,6 +313,26 @@
|
|
|
return this.leftDate.getDate();
|
|
|
},
|
|
|
|
|
|
+ leftYearLabel() {
|
|
|
+ return this.computedYearLabel(this.leftYear, !this.canShowLeftDatePanel && this.canShowYearPanel);
|
|
|
+ },
|
|
|
+
|
|
|
+ canShowLeftDatePanel() {
|
|
|
+ return this.currentView.indexOf('left') === -1;
|
|
|
+ },
|
|
|
+
|
|
|
+ canShowRightDatePanel() {
|
|
|
+ return this.currentView.indexOf('right') === -1;
|
|
|
+ },
|
|
|
+
|
|
|
+ canShowYearPanel() {
|
|
|
+ return this.currentView.indexOf('year') !== -1;
|
|
|
+ },
|
|
|
+
|
|
|
+ yearStep() {
|
|
|
+ return this.canShowYearPanel ? 10 : 1;
|
|
|
+ },
|
|
|
+
|
|
|
rightYear() {
|
|
|
return this.rightDate.getFullYear();
|
|
|
},
|
|
|
@@ -262,6 +345,10 @@
|
|
|
return this.rightDate.getDate();
|
|
|
},
|
|
|
|
|
|
+ rightYearLabel() {
|
|
|
+ return this.computedYearLabel(this.rightYear, !this.canShowRightDatePanel && this.canShowYearPanel);
|
|
|
+ },
|
|
|
+
|
|
|
minVisibleDate() {
|
|
|
if (this.dateUserInput.min !== null) return this.dateUserInput.min;
|
|
|
if (this.minDate) return formatDate(this.minDate, this.dateFormat);
|
|
|
@@ -340,6 +427,7 @@
|
|
|
format: '',
|
|
|
arrowControl: false,
|
|
|
unlinkPanels: false,
|
|
|
+ rangeLabelClick: true,
|
|
|
dateUserInput: {
|
|
|
min: null,
|
|
|
max: null
|
|
|
@@ -347,7 +435,9 @@
|
|
|
timeUserInput: {
|
|
|
min: null,
|
|
|
max: null
|
|
|
- }
|
|
|
+ },
|
|
|
+ currentView: 'date',
|
|
|
+ selectionMode: 'day'
|
|
|
};
|
|
|
},
|
|
|
|
|
|
@@ -440,6 +530,18 @@
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
+ computedYearLabel(year, showYear = false) {
|
|
|
+ const yearTranslation = this.t('el.datepicker.year');
|
|
|
+ if (showYear) {
|
|
|
+ const startYear = Math.floor(year / 10) * 10;
|
|
|
+ if (yearTranslation) {
|
|
|
+ return startYear + ' ' + yearTranslation + ' - ' + (startYear + 9) + ' ' + yearTranslation;
|
|
|
+ }
|
|
|
+ return startYear + ' - ' + (startYear + 9);
|
|
|
+ }
|
|
|
+ return year + ' ' + yearTranslation;
|
|
|
+ },
|
|
|
+
|
|
|
handleClear() {
|
|
|
this.minDate = null;
|
|
|
this.maxDate = null;
|
|
|
@@ -555,6 +657,38 @@
|
|
|
this.handleConfirm();
|
|
|
},
|
|
|
|
|
|
+ handleYearPick(year, direction) {
|
|
|
+ const pointVal = direction === 'left' ? 'leftDate' : 'rightDate';
|
|
|
+ const pointMonthVal = direction === 'left' ? this.leftMonth : this.rightMonth;
|
|
|
+ if (this.selectionMode === 'year') {
|
|
|
+ this[pointVal] = modifyDate(this[pointVal], year, 0, 1);
|
|
|
+ this.emit(this[pointVal]);
|
|
|
+ } else if (this.selectionMode === 'years') {
|
|
|
+ this.emit(year, true);
|
|
|
+ } else {
|
|
|
+ this[pointVal] = changeYearMonthAndClampDate(this[pointVal], year, pointMonthVal);
|
|
|
+ // TODO: should emit intermediate value ??
|
|
|
+ // this.emit(this.date, true);
|
|
|
+ this.currentView = 'month';
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ handleMonthPick(month, direction) {
|
|
|
+ const pointVal = direction === 'left' ? 'leftDate' : 'rightDate';
|
|
|
+ const pointYearVal = direction === 'left' ? this.leftYear : this.rightYear;
|
|
|
+ if (this.selectionMode === 'month') {
|
|
|
+ this[pointVal] = modifyDate(this[pointVal], pointYearVal, month, 1);
|
|
|
+ this.emit(this[pointVal]);
|
|
|
+ } else if (this.selectionMode === 'months') {
|
|
|
+ this.emit(month, true);
|
|
|
+ } else {
|
|
|
+ this[pointVal] = changeYearMonthAndClampDate(this[pointVal], pointYearVal, month);
|
|
|
+ // TODO: should emit intermediate value ??
|
|
|
+ // this.emit(this.date);
|
|
|
+ this.currentView = 'date';
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
handleShortcutClick(shortcut) {
|
|
|
if (shortcut.onClick) {
|
|
|
shortcut.onClick(this);
|
|
|
@@ -600,7 +734,7 @@
|
|
|
|
|
|
// leftPrev*, rightNext* need to take care of `unlinkPanels`
|
|
|
leftPrevYear() {
|
|
|
- this.leftDate = prevYear(this.leftDate);
|
|
|
+ this.leftDate = prevYear(this.leftDate, this.yearStep);
|
|
|
if (!this.unlinkPanels) {
|
|
|
this.rightDate = nextMonth(this.leftDate);
|
|
|
}
|
|
|
@@ -615,10 +749,10 @@
|
|
|
|
|
|
rightNextYear() {
|
|
|
if (!this.unlinkPanels) {
|
|
|
- this.leftDate = nextYear(this.leftDate);
|
|
|
+ this.leftDate = nextYear(this.leftDate, this.yearStep);
|
|
|
this.rightDate = nextMonth(this.leftDate);
|
|
|
} else {
|
|
|
- this.rightDate = nextYear(this.rightDate);
|
|
|
+ this.rightDate = nextYear(this.rightDate, this.yearStep);
|
|
|
}
|
|
|
},
|
|
|
|
|
|
@@ -633,7 +767,7 @@
|
|
|
|
|
|
// leftNext*, rightPrev* are called when `unlinkPanels` is true
|
|
|
leftNextYear() {
|
|
|
- this.leftDate = nextYear(this.leftDate);
|
|
|
+ this.leftDate = nextYear(this.leftDate, this.yearStep);
|
|
|
},
|
|
|
|
|
|
leftNextMonth() {
|
|
|
@@ -641,7 +775,7 @@
|
|
|
},
|
|
|
|
|
|
rightPrevYear() {
|
|
|
- this.rightDate = prevYear(this.rightDate);
|
|
|
+ this.rightDate = prevYear(this.rightDate, this.yearStep);
|
|
|
},
|
|
|
|
|
|
rightPrevMonth() {
|
|
|
@@ -672,9 +806,18 @@
|
|
|
if (this.minDate && this.maxDate == null) this.rangeState.selecting = false;
|
|
|
this.minDate = this.value && isDate(this.value[0]) ? new Date(this.value[0]) : null;
|
|
|
this.maxDate = this.value && isDate(this.value[0]) ? new Date(this.value[1]) : null;
|
|
|
+ this.currentView = 'date';
|
|
|
+ },
|
|
|
+
|
|
|
+ showMonthPicker(direction) {
|
|
|
+ this.currentView = direction + '-month';
|
|
|
+ },
|
|
|
+
|
|
|
+ showYearPicker(direction) {
|
|
|
+ this.currentView = direction + '-year';
|
|
|
}
|
|
|
},
|
|
|
|
|
|
- components: { TimePicker, DateTable, ElInput, ElButton }
|
|
|
+ components: { TimePicker, YearTable, MonthTable, DateTable, ElInput, ElButton }
|
|
|
};
|
|
|
</script>
|
zhangyuhan