Fix month|year preselection/shortcut when picking a date

Sergio Crisostomo
1 parent 5426dcf9
Showing 4 changed files with 56 additions and 21 deletions Show diff stats
src/components/date-picker/panel/Date/date-panel-mixin.js
src/components/date-picker/panel/Date/date-range.vue
src/components/date-picker/panel/Date/date.vue
src/components/date-picker/picker.vue
@@ -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 (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'){
@@ -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);
  
-                this.$emit('on-pick', 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"