Commit 73a34dfab5590ce73df021114bebeaf01b21273e
1 parent
8c16b301
Fix year/month pre-selection
Showing
2 changed files
with
29 additions
and
8 deletions
Show diff stats
src/components/date-picker/panel/Date/date-range.vue
| ... | ... | @@ -13,15 +13,16 @@ |
| 13 | 13 | :class="iconBtnCls('prev', '-double')" |
| 14 | 14 | @click="prevYear('left')"><Icon type="ios-arrow-left"></Icon></span> |
| 15 | 15 | <span |
| 16 | + v-if="splitPanels || leftPickerTable === 'date-table'" | |
| 16 | 17 | :class="iconBtnCls('prev')" |
| 17 | 18 | @click="prevMonth('left')" |
| 18 | 19 | v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span> |
| 19 | 20 | <date-panel-label |
| 20 | 21 | :date-panel-label="leftDatePanelLabel" |
| 21 | - :current-view="currentView" | |
| 22 | + :current-view="leftDatePanelView" | |
| 22 | 23 | :date-prefix-cls="datePrefixCls"></date-panel-label> |
| 23 | 24 | <span |
| 24 | - v-if="splitPanels" | |
| 25 | + v-if="splitPanels || leftPickerTable !== 'date-table'" | |
| 25 | 26 | :class="iconBtnCls('next', '-double')" |
| 26 | 27 | @click="nextYear('left')"><Icon type="ios-arrow-right"></Icon></span> |
| 27 | 28 | <span |
| ... | ... | @@ -48,7 +49,7 @@ |
| 48 | 49 | <div :class="[prefixCls + '-content', prefixCls + '-content-right']" v-show="!isTime"> |
| 49 | 50 | <div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'"> |
| 50 | 51 | <span |
| 51 | - v-if="splitPanels" | |
| 52 | + v-if="splitPanels || rightPickerTable !== 'date-table'" | |
| 52 | 53 | :class="iconBtnCls('prev', '-double')" |
| 53 | 54 | @click="prevYear('right')"><Icon type="ios-arrow-left"></Icon></span> |
| 54 | 55 | <span |
| ... | ... | @@ -58,12 +59,13 @@ |
| 58 | 59 | v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span> |
| 59 | 60 | <date-panel-label |
| 60 | 61 | :date-panel-label="rightDatePanelLabel" |
| 61 | - :current-view="currentView" | |
| 62 | + :current-view="rightDatePanelView" | |
| 62 | 63 | :date-prefix-cls="datePrefixCls"></date-panel-label> |
| 63 | 64 | <span |
| 64 | 65 | :class="iconBtnCls('next', '-double')" |
| 65 | 66 | @click="nextYear('right')"><Icon type="ios-arrow-right"></Icon></span> |
| 66 | 67 | <span |
| 68 | + v-if="splitPanels || rightPickerTable === 'date-table'" | |
| 67 | 69 | :class="iconBtnCls('next')" |
| 68 | 70 | @click="nextMonth('right')" |
| 69 | 71 | v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span> |
| ... | ... | @@ -169,6 +171,12 @@ |
| 169 | 171 | rightDatePanelLabel(){ |
| 170 | 172 | return this.panelLabelConfig('right'); |
| 171 | 173 | }, |
| 174 | + leftDatePanelView(){ | |
| 175 | + return this.leftPickerTable.split('-').shift(); | |
| 176 | + }, | |
| 177 | + rightDatePanelView(){ | |
| 178 | + return this.rightPickerTable.split('-').shift(); | |
| 179 | + }, | |
| 172 | 180 | timeDisabled(){ |
| 173 | 181 | return !(this.dates[0] && this.dates[1]); |
| 174 | 182 | }, |
| ... | ... | @@ -287,7 +295,16 @@ |
| 287 | 295 | }, |
| 288 | 296 | handlePreSelection(panel, value){ |
| 289 | 297 | this[`${panel}PanelDate`] = value; |
| 290 | - this[`${panel}PickerTable`] = `${this.currentView}-table`; | |
| 298 | + const currentViewType = this[`${panel}PickerTable`]; | |
| 299 | + if (currentViewType === 'year-table') this[`${panel}PickerTable`] = 'month-table'; | |
| 300 | + else this[`${panel}PickerTable`] = `${this.currentView}-table`; | |
| 301 | + | |
| 302 | + if (!this.splitPanels){ | |
| 303 | + const otherPanel = panel === 'left' ? 'right' : 'left'; | |
| 304 | + const type = currentViewType === 'year-table' ? 'FullYear' : 'Month'; | |
| 305 | + this[`${otherPanel}PanelDate`] = value; | |
| 306 | + this.changePanelDate(otherPanel, type, 1); | |
| 307 | + } | |
| 291 | 308 | }, |
| 292 | 309 | handleRangePick (val) { |
| 293 | 310 | if (this.rangeState.selecting || this.currentView === 'time'){ | ... | ... |
src/components/date-picker/panel/Date/date.vue
| ... | ... | @@ -12,17 +12,19 @@ |
| 12 | 12 | :class="iconBtnCls('prev', '-double')" |
| 13 | 13 | @click="changeYear(-1)"><Icon type="ios-arrow-left"></Icon></span> |
| 14 | 14 | <span |
| 15 | + v-if="pickerTable === 'date-table'" | |
| 15 | 16 | :class="iconBtnCls('prev')" |
| 16 | 17 | @click="changeMonth(-1)" |
| 17 | 18 | v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span> |
| 18 | 19 | <date-panel-label |
| 19 | 20 | :date-panel-label="datePanelLabel" |
| 20 | - :current-view="currentView" | |
| 21 | + :current-view="pickerTable.split('-').shift()" | |
| 21 | 22 | :date-prefix-cls="datePrefixCls"></date-panel-label> |
| 22 | 23 | <span |
| 23 | 24 | :class="iconBtnCls('next', '-double')" |
| 24 | 25 | @click="changeYear(+1)"><Icon type="ios-arrow-right"></Icon></span> |
| 25 | 26 | <span |
| 27 | + v-if="pickerTable === 'date-table'" | |
| 26 | 28 | :class="iconBtnCls('next')" |
| 27 | 29 | @click="changeMonth(+1)" |
| 28 | 30 | v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span> |
| ... | ... | @@ -155,7 +157,7 @@ |
| 155 | 157 | this.pickerTable = this.getTableType(this.currentView); |
| 156 | 158 | }, |
| 157 | 159 | changeYear(dir){ |
| 158 | - if (this.selectionMode === 'year'){ | |
| 160 | + if (this.selectionMode === 'year' || this.pickerTable === 'year-table'){ | |
| 159 | 161 | this.panelDate = new Date(this.panelDate.getFullYear() + dir * 10, 0, 1); |
| 160 | 162 | } else { |
| 161 | 163 | this.panelDate = siblingMonth(this.panelDate, dir * 12); |
| ... | ... | @@ -169,7 +171,9 @@ |
| 169 | 171 | }, |
| 170 | 172 | handlePreSelection(value){ |
| 171 | 173 | this.panelDate = value; |
| 172 | - this.pickerTable = this.getTableType(this.currentView); | |
| 174 | + if (this.pickerTable === 'year-table') this.pickerTable = 'month-table'; | |
| 175 | + else this.pickerTable = this.getTableType(this.currentView); | |
| 176 | + | |
| 173 | 177 | }, |
| 174 | 178 | handlePick (value) { |
| 175 | 179 | const {selectionMode, panelDate} = this; | ... | ... |