Fix month|year preselection/shortcut when picking a date

This commit is contained in:
Sergio Crisostomo 2018-01-24 09:46:07 +01:00
parent 5426dcf989
commit b52e02e436
4 changed files with 56 additions and 21 deletions

View file

@ -42,6 +42,10 @@ export default {
},
startDate: {
type: Date
},
pickerType: {
type: String,
require: true
}
},
computed: {

View file

@ -31,7 +31,7 @@
v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
</div>
<component
:is="pickerTable"
:is="leftPickerTable"
ref="leftYearTable"
v-if="currentView !== 'time'"
:table-date="leftPanelDate"
@ -41,7 +41,7 @@
:show-week-numbers="showWeekNumbers"
:value="dates"
@on-change-range="handleChangeRange"
@on-pick="handleRangePick"
@on-pick="panelPickerHandlers.left"
@on-pick-click="handlePickClick"
></component>
</div>
@ -69,7 +69,7 @@
v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
</div>
<component
:is="pickerTable"
:is="rightPickerTable"
ref="rightYearTable"
v-if="currentView !== 'time'"
:table-date="rightPanelDate"
@ -79,7 +79,7 @@
:show-week-numbers="showWeekNumbers"
:value="dates"
@on-change-range="handleChangeRange"
@on-pick="handleRangePick"
@on-pick="panelPickerHandlers.right"
@on-pick-click="handlePickClick"></component>
</div>
<div :class="[prefixCls + '-content']" v-show="isTime">
@ -147,6 +147,8 @@
dates: this.value,
rangeState: {from: this.value[0], to: this.value[1], selecting: minDate && !maxDate},
currentView: this.selectionMode || 'range',
leftPickerTable: `${this.selectionMode}-table`,
rightPickerTable: `${this.selectionMode}-table`,
leftPanelDate: leftPanelDate,
rightPanelDate: new Date(leftPanelDate.getFullYear(), leftPanelDate.getMonth() + 1, leftPanelDate.getDate())
};
@ -161,9 +163,6 @@
}
];
},
pickerTable(){
return `${this.currentView}-table`;
},
leftDatePanelLabel(){
return this.panelLabelConfig('left');
},
@ -172,6 +171,13 @@
},
timeDisabled(){
return !(this.dates[0] && this.dates[1]);
},
panelPickerHandlers(){
const tableType = `${this.currentView}-table`;
return {
left: this.leftPickerTable === tableType ? this.handleRangePick : this.handlePreSelection.bind(this, 'left'),
right: this.leftPickerTable === tableType ? this.handleRangePick : this.handlePreSelection.bind(this, 'right'),
}
}
},
watch: {
@ -190,6 +196,9 @@
const rightMonth = this.rightPanelDate.getMonth();
const isSameYear = this.leftPanelDate.getFullYear() === this.rightPanelDate.getFullYear();
this.leftPickerTable = `${currentView}-table`;
this.rightPickerTable = `${currentView}-table`;
if (currentView === 'date' && isSameYear && leftMonth === rightMonth){
this.changePanelDate('right', 'Month', 1);
}
@ -257,11 +266,15 @@
}
}
},
showYearPicker () {
this.currentView = 'year';
showYearPicker (panel) {
this[`${panel}PickerTable`] = 'year-table';
},
showMonthPicker () {
this.currentView = 'month';
showMonthPicker (panel) {
this[`${panel}PickerTable`] = 'month-table';
},
handlePreSelection(panel, value){
this[`${panel}PanelDate`] = value;
this[`${panel}PickerTable`] = `${this.currentView}-table`;
},
handleRangePick (val) {
if (this.rangeState.selecting || this.currentView === 'time'){

View file

@ -37,7 +37,7 @@
:value="dates"
:selection-mode="selectionMode"
:disabled-date="disabledDate"
@on-pick="handlePick"
@on-pick="panelPickerHandlers"
@on-pick-click="handlePickClick"
></component>
</div>
@ -92,11 +92,14 @@
// in the mixin
},
data () {
const dates = this.value.slice().sort();
const {selectionMode, value} = this;
const dates = value.slice().sort();
return {
prefixCls: prefixCls,
datePrefixCls: datePrefixCls,
currentView: this.selectionMode || 'date',
currentView: selectionMode || 'date',
pickerTable: this.getTableType(selectionMode),
dates: dates,
panelDate: this.startDate || dates[0] || new Date()
};
@ -110,8 +113,8 @@
}
];
},
pickerTable(){
return this.currentView.match(/^time/) ? 'time-picker' : `${this.currentView}-table`;
panelPickerHandlers(){
return this.pickerTable === `${this.currentView}-table` ? this.handlePick : this.handlePreSelection
},
datePanelLabel () {
const locale = this.t('i.locale');
@ -120,7 +123,7 @@
const { labels, separator } = formatDateLabels(locale, datePanelLabel, date);
const handler = type => {
return () => (this.currentView = type);
return () => this.pickerTable = this.getTableType(type);
};
return {
@ -139,8 +142,9 @@
selectionMode(){
this.currentView = this.selectionMode;
},
currentView (val) {
this.$emit('on-selection-mode-change', val);
currentView (currentView) {
this.$emit('on-selection-mode-change', currentView);
this.pickertable = this.getTableType(currentView);
}
},
methods: {
@ -151,16 +155,29 @@
this.panelDate = siblingMonth(this.panelDate, dir * 12);
}
},
getTableType(currentView){
return currentView.match(/^time/) ? 'time-picker' : `${currentView}-table`;
},
changeMonth(dir){
this.panelDate = siblingMonth(this.panelDate, dir);
},
handlePreSelection(value){
this.panelDate = value;
this.pickerTable = this.getTableType(this.currentView);
},
handlePick (value) {
const {selectionMode, panelDate} = this;
const {selectionMode, panelDate, pickerType} = this;
if (selectionMode === 'year') value = new Date(value.getFullYear(), 0, 1);
else if (selectionMode === 'month') value = new Date(panelDate.getFullYear(), value.getMonth(), 1);
else value = new Date(value);
if (pickerType === selectionMode){
this.$emit('on-pick', value);
} else {
this.selectionMode
}
},
},
};

View file

@ -45,6 +45,7 @@
:start-date="startDate"
:split-panels="splitPanels"
:show-week-numbers="showWeekNumbers"
:picker-type="type"
v-bind="ownPickerProps"