Fix month|year preselection/shortcut when picking a date
This commit is contained in:
parent
5426dcf989
commit
b52e02e436
4 changed files with 56 additions and 21 deletions
|
@ -42,6 +42,10 @@ export default {
|
|||
},
|
||||
startDate: {
|
||||
type: Date
|
||||
},
|
||||
pickerType: {
|
||||
type: String,
|
||||
require: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
|
@ -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'){
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
@ -45,6 +45,7 @@
|
|||
:start-date="startDate"
|
||||
:split-panels="splitPanels"
|
||||
:show-week-numbers="showWeekNumbers"
|
||||
:picker-type="type"
|
||||
|
||||
v-bind="ownPickerProps"
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue