Fix year/month pre-selection
This commit is contained in:
parent
8c16b30149
commit
73a34dfab5
2 changed files with 29 additions and 8 deletions
|
@ -13,15 +13,16 @@
|
||||||
:class="iconBtnCls('prev', '-double')"
|
:class="iconBtnCls('prev', '-double')"
|
||||||
@click="prevYear('left')"><Icon type="ios-arrow-left"></Icon></span>
|
@click="prevYear('left')"><Icon type="ios-arrow-left"></Icon></span>
|
||||||
<span
|
<span
|
||||||
|
v-if="splitPanels || leftPickerTable === 'date-table'"
|
||||||
:class="iconBtnCls('prev')"
|
:class="iconBtnCls('prev')"
|
||||||
@click="prevMonth('left')"
|
@click="prevMonth('left')"
|
||||||
v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
|
v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
|
||||||
<date-panel-label
|
<date-panel-label
|
||||||
:date-panel-label="leftDatePanelLabel"
|
:date-panel-label="leftDatePanelLabel"
|
||||||
:current-view="currentView"
|
:current-view="leftDatePanelView"
|
||||||
:date-prefix-cls="datePrefixCls"></date-panel-label>
|
:date-prefix-cls="datePrefixCls"></date-panel-label>
|
||||||
<span
|
<span
|
||||||
v-if="splitPanels"
|
v-if="splitPanels || leftPickerTable !== 'date-table'"
|
||||||
:class="iconBtnCls('next', '-double')"
|
:class="iconBtnCls('next', '-double')"
|
||||||
@click="nextYear('left')"><Icon type="ios-arrow-right"></Icon></span>
|
@click="nextYear('left')"><Icon type="ios-arrow-right"></Icon></span>
|
||||||
<span
|
<span
|
||||||
|
@ -48,7 +49,7 @@
|
||||||
<div :class="[prefixCls + '-content', prefixCls + '-content-right']" v-show="!isTime">
|
<div :class="[prefixCls + '-content', prefixCls + '-content-right']" v-show="!isTime">
|
||||||
<div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
|
<div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
|
||||||
<span
|
<span
|
||||||
v-if="splitPanels"
|
v-if="splitPanels || rightPickerTable !== 'date-table'"
|
||||||
:class="iconBtnCls('prev', '-double')"
|
:class="iconBtnCls('prev', '-double')"
|
||||||
@click="prevYear('right')"><Icon type="ios-arrow-left"></Icon></span>
|
@click="prevYear('right')"><Icon type="ios-arrow-left"></Icon></span>
|
||||||
<span
|
<span
|
||||||
|
@ -58,12 +59,13 @@
|
||||||
v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
|
v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
|
||||||
<date-panel-label
|
<date-panel-label
|
||||||
:date-panel-label="rightDatePanelLabel"
|
:date-panel-label="rightDatePanelLabel"
|
||||||
:current-view="currentView"
|
:current-view="rightDatePanelView"
|
||||||
:date-prefix-cls="datePrefixCls"></date-panel-label>
|
:date-prefix-cls="datePrefixCls"></date-panel-label>
|
||||||
<span
|
<span
|
||||||
:class="iconBtnCls('next', '-double')"
|
:class="iconBtnCls('next', '-double')"
|
||||||
@click="nextYear('right')"><Icon type="ios-arrow-right"></Icon></span>
|
@click="nextYear('right')"><Icon type="ios-arrow-right"></Icon></span>
|
||||||
<span
|
<span
|
||||||
|
v-if="splitPanels || rightPickerTable === 'date-table'"
|
||||||
:class="iconBtnCls('next')"
|
:class="iconBtnCls('next')"
|
||||||
@click="nextMonth('right')"
|
@click="nextMonth('right')"
|
||||||
v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
|
v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
|
||||||
|
@ -169,6 +171,12 @@
|
||||||
rightDatePanelLabel(){
|
rightDatePanelLabel(){
|
||||||
return this.panelLabelConfig('right');
|
return this.panelLabelConfig('right');
|
||||||
},
|
},
|
||||||
|
leftDatePanelView(){
|
||||||
|
return this.leftPickerTable.split('-').shift();
|
||||||
|
},
|
||||||
|
rightDatePanelView(){
|
||||||
|
return this.rightPickerTable.split('-').shift();
|
||||||
|
},
|
||||||
timeDisabled(){
|
timeDisabled(){
|
||||||
return !(this.dates[0] && this.dates[1]);
|
return !(this.dates[0] && this.dates[1]);
|
||||||
},
|
},
|
||||||
|
@ -287,7 +295,16 @@
|
||||||
},
|
},
|
||||||
handlePreSelection(panel, value){
|
handlePreSelection(panel, value){
|
||||||
this[`${panel}PanelDate`] = value;
|
this[`${panel}PanelDate`] = value;
|
||||||
this[`${panel}PickerTable`] = `${this.currentView}-table`;
|
const currentViewType = this[`${panel}PickerTable`];
|
||||||
|
if (currentViewType === 'year-table') this[`${panel}PickerTable`] = 'month-table';
|
||||||
|
else this[`${panel}PickerTable`] = `${this.currentView}-table`;
|
||||||
|
|
||||||
|
if (!this.splitPanels){
|
||||||
|
const otherPanel = panel === 'left' ? 'right' : 'left';
|
||||||
|
const type = currentViewType === 'year-table' ? 'FullYear' : 'Month';
|
||||||
|
this[`${otherPanel}PanelDate`] = value;
|
||||||
|
this.changePanelDate(otherPanel, type, 1);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
handleRangePick (val) {
|
handleRangePick (val) {
|
||||||
if (this.rangeState.selecting || this.currentView === 'time'){
|
if (this.rangeState.selecting || this.currentView === 'time'){
|
||||||
|
|
|
@ -12,17 +12,19 @@
|
||||||
:class="iconBtnCls('prev', '-double')"
|
:class="iconBtnCls('prev', '-double')"
|
||||||
@click="changeYear(-1)"><Icon type="ios-arrow-left"></Icon></span>
|
@click="changeYear(-1)"><Icon type="ios-arrow-left"></Icon></span>
|
||||||
<span
|
<span
|
||||||
|
v-if="pickerTable === 'date-table'"
|
||||||
:class="iconBtnCls('prev')"
|
:class="iconBtnCls('prev')"
|
||||||
@click="changeMonth(-1)"
|
@click="changeMonth(-1)"
|
||||||
v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
|
v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
|
||||||
<date-panel-label
|
<date-panel-label
|
||||||
:date-panel-label="datePanelLabel"
|
:date-panel-label="datePanelLabel"
|
||||||
:current-view="currentView"
|
:current-view="pickerTable.split('-').shift()"
|
||||||
:date-prefix-cls="datePrefixCls"></date-panel-label>
|
:date-prefix-cls="datePrefixCls"></date-panel-label>
|
||||||
<span
|
<span
|
||||||
:class="iconBtnCls('next', '-double')"
|
:class="iconBtnCls('next', '-double')"
|
||||||
@click="changeYear(+1)"><Icon type="ios-arrow-right"></Icon></span>
|
@click="changeYear(+1)"><Icon type="ios-arrow-right"></Icon></span>
|
||||||
<span
|
<span
|
||||||
|
v-if="pickerTable === 'date-table'"
|
||||||
:class="iconBtnCls('next')"
|
:class="iconBtnCls('next')"
|
||||||
@click="changeMonth(+1)"
|
@click="changeMonth(+1)"
|
||||||
v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
|
v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
|
||||||
|
@ -155,7 +157,7 @@
|
||||||
this.pickerTable = this.getTableType(this.currentView);
|
this.pickerTable = this.getTableType(this.currentView);
|
||||||
},
|
},
|
||||||
changeYear(dir){
|
changeYear(dir){
|
||||||
if (this.selectionMode === 'year'){
|
if (this.selectionMode === 'year' || this.pickerTable === 'year-table'){
|
||||||
this.panelDate = new Date(this.panelDate.getFullYear() + dir * 10, 0, 1);
|
this.panelDate = new Date(this.panelDate.getFullYear() + dir * 10, 0, 1);
|
||||||
} else {
|
} else {
|
||||||
this.panelDate = siblingMonth(this.panelDate, dir * 12);
|
this.panelDate = siblingMonth(this.panelDate, dir * 12);
|
||||||
|
@ -169,7 +171,9 @@
|
||||||
},
|
},
|
||||||
handlePreSelection(value){
|
handlePreSelection(value){
|
||||||
this.panelDate = value;
|
this.panelDate = value;
|
||||||
this.pickerTable = this.getTableType(this.currentView);
|
if (this.pickerTable === 'year-table') this.pickerTable = 'month-table';
|
||||||
|
else this.pickerTable = this.getTableType(this.currentView);
|
||||||
|
|
||||||
},
|
},
|
||||||
handlePick (value) {
|
handlePick (value) {
|
||||||
const {selectionMode, panelDate} = this;
|
const {selectionMode, panelDate} = this;
|
||||||
|
|
Loading…
Add table
Reference in a new issue