From b52e02e4367002c01d04793c2e8059965aa26b80 Mon Sep 17 00:00:00 2001 From: Sergio Crisostomo Date: Wed, 24 Jan 2018 09:46:07 +0100 Subject: [PATCH] Fix month|year preselection/shortcut when picking a date --- src/components/date-picker/panel/Date/date-panel-mixin.js | 4 ++++ src/components/date-picker/panel/Date/date-range.vue | 35 ++++++++++++++++++++++++----------- src/components/date-picker/panel/Date/date.vue | 37 +++++++++++++++++++++++++++---------- src/components/date-picker/picker.vue | 1 + 4 files changed, 56 insertions(+), 21 deletions(-) diff --git a/src/components/date-picker/panel/Date/date-panel-mixin.js b/src/components/date-picker/panel/Date/date-panel-mixin.js index b56a513..b2f666b 100644 --- a/src/components/date-picker/panel/Date/date-panel-mixin.js +++ b/src/components/date-picker/panel/Date/date-panel-mixin.js @@ -42,6 +42,10 @@ export default { }, startDate: { type: Date + }, + pickerType: { + type: String, + require: true } }, computed: { diff --git a/src/components/date-picker/panel/Date/date-range.vue b/src/components/date-picker/panel/Date/date-range.vue index 8cfd3d4..83e4eb8 100644 --- a/src/components/date-picker/panel/Date/date-range.vue +++ b/src/components/date-picker/panel/Date/date-range.vue @@ -31,7 +31,7 @@ v-show="currentView === 'date'"> @@ -69,7 +69,7 @@ v-show="currentView === 'date'">
@@ -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 (panel) { + this[`${panel}PickerTable`] = 'month-table'; }, - showMonthPicker () { - this.currentView = 'month'; + handlePreSelection(panel, value){ + this[`${panel}PanelDate`] = value; + this[`${panel}PickerTable`] = `${this.currentView}-table`; }, handleRangePick (val) { if (this.rangeState.selecting || this.currentView === 'time'){ diff --git a/src/components/date-picker/panel/Date/date.vue b/src/components/date-picker/panel/Date/date.vue index 118799d..3aaa90b 100644 --- a/src/components/date-picker/panel/Date/date.vue +++ b/src/components/date-picker/panel/Date/date.vue @@ -37,7 +37,7 @@ :value="dates" :selection-mode="selectionMode" :disabled-date="disabledDate" - @on-pick="handlePick" + @on-pick="panelPickerHandlers" @on-pick-click="handlePickClick" >
@@ -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); - this.$emit('on-pick', value); + if (pickerType === selectionMode){ + this.$emit('on-pick', value); + } else { + this.selectionMode + } + + }, }, }; diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue index 70dd1e0..2a0449c 100644 --- a/src/components/date-picker/picker.vue +++ b/src/components/date-picker/picker.vue @@ -45,6 +45,7 @@ :start-date="startDate" :split-panels="splitPanels" :show-week-numbers="showWeekNumbers" + :picker-type="type" v-bind="ownPickerProps" -- libgit2 0.21.4