Fix panels reset on blur and

This commit is contained in:
Sergio Crisostomo 2018-01-24 13:33:48 +01:00
parent bcf09be744
commit 46726afdf4
3 changed files with 23 additions and 13 deletions

View file

@ -198,12 +198,6 @@
this.leftPanelDate = leftPanelDate; this.leftPanelDate = leftPanelDate;
const rightPanelDate = new Date(leftPanelDate.getFullYear(), leftPanelDate.getMonth() + 1, leftPanelDate.getDate()); const rightPanelDate = new Date(leftPanelDate.getFullYear(), leftPanelDate.getMonth() + 1, leftPanelDate.getDate());
this.rightPanelDate = this.splitPanels ? new Date(Math.max(this.dates[1], rightPanelDate)) : rightPanelDate; this.rightPanelDate = this.splitPanels ? new Date(Math.max(this.dates[1], rightPanelDate)) : rightPanelDate;
// reset stuff
this.currentView = this.selectionMode || 'range';
this.leftPickerTable = `${this.currentView}-table`;
this.rightPickerTable = `${this.currentView}-table`;
}, },
currentView(currentView){ currentView(currentView){
const leftMonth = this.leftPanelDate.getMonth(); const leftMonth = this.leftPanelDate.getMonth();
@ -225,6 +219,11 @@
} }
}, },
methods: { methods: {
reset(){
this.currentView = this.selectionMode;
this.leftPickerTable = `${this.currentView}-table`;
this.rightPickerTable = `${this.currentView}-table`;
},
panelLabelConfig (direction) { panelLabelConfig (direction) {
const locale = this.t('i.locale'); const locale = this.t('i.locale');
const datePanelLabel = this.t('i.datepicker.datePanelLabel'); const datePanelLabel = this.t('i.datepicker.datePanelLabel');

View file

@ -139,17 +139,21 @@
value (newVal) { value (newVal) {
this.dates = newVal; this.dates = newVal;
if (JSON.stringify(newVal) === '[null]') this.panelDate = this.startDate || new Date(); if (JSON.stringify(newVal) === '[null]') this.panelDate = this.startDate || new Date();
// reset stuff
this.currentView = this.selectionMode;
this.pickerTable = this.getTableType(this.currentView);
}, },
currentView (currentView) { currentView (currentView) {
this.$emit('on-selection-mode-change', currentView); this.$emit('on-selection-mode-change', currentView);
this.pickertable = this.getTableType(currentView); this.pickertable = this.getTableType(currentView);
},
selectionMode(type){
this.currentView = type;
this.pickerTable = this.getTableType(type);
} }
}, },
methods: { methods: {
reset(){
this.currentView = this.selectionMode;
this.pickerTable = this.getTableType(this.currentView);
},
changeYear(dir){ changeYear(dir){
if (this.selectionMode === 'year'){ if (this.selectionMode === 'year'){
this.panelDate = new Date(this.panelDate.getFullYear() + dir * 10, 0, 1); this.panelDate = new Date(this.panelDate.getFullYear() + dir * 10, 0, 1);

View file

@ -35,6 +35,7 @@
<div> <div>
<component <component
:is="panel" :is="panel"
ref="pickerPanel"
:visible="visible" :visible="visible"
:showTime="type === 'datetime' || type === 'datetimerange'" :showTime="type === 'datetime' || type === 'datetimerange'"
:confirm="isConfirm" :confirm="isConfirm"
@ -212,10 +213,9 @@
}, },
methods: { methods: {
onSelectionModeChange(type){ onSelectionModeChange(type){
if (type.match(/^date/)) type = 'date'; if (type.match(/^date/)) type = 'date';
this.selectionMode = type; this.selectionMode = oneOf(type, ['year', 'month', 'date', 'time']) && type;
return type; return this.selectionMode;
}, },
// transfer Drop // transfer Drop
handleTransferClick () { handleTransferClick () {
@ -237,7 +237,12 @@
}, },
handleBlur () { handleBlur () {
this.visible = false; this.visible = false;
this.onSelectionModeChange(this.type);
this.internalValue = this.internalValue.slice(); // trigger panel watchers to reset views this.internalValue = this.internalValue.slice(); // trigger panel watchers to reset views
this.reset();
},
reset(){
this.$refs.pickerPanel.reset && this.$refs.pickerPanel.reset();
}, },
handleInputChange (event) { handleInputChange (event) {
const isArrayValue = this.type.includes('range') || this.multiple; const isArrayValue = this.type.includes('range') || this.multiple;
@ -280,6 +285,7 @@
this.$emit('on-clear'); this.$emit('on-clear');
this.dispatch('FormItem', 'on-form-change', ''); this.dispatch('FormItem', 'on-form-change', '');
this.emitChange(); this.emitChange();
this.reset();
setTimeout( setTimeout(
() => this.onSelectionModeChange(this.type), () => this.onSelectionModeChange(this.type),
@ -354,6 +360,7 @@
onPickSuccess(){ onPickSuccess(){
this.visible = false; this.visible = false;
this.$emit('on-ok'); this.$emit('on-ok');
this.reset();
}, },
}, },
watch: { watch: {