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; | ... | ... |