other / mew-iview

Commit d9e0bcc987bcf37af24c71c6ae4c6cc36632377d

Authored by Aresn
Committed by GitHub
2 parents 5bd5dd59 e9c0d047

Merge pull request #2000 from SergioCrisostomo/datepicker-refactor 

refactor and reduce code logic
Showing 1 changed file with 22 additions and 48 deletions   Show diff stats
Inline Side-by-side
src/components/date-picker/panel/date.vue
  Show/Hide comments   View file @d9e0bcc
@@ -10,10 +10,10 @@ @@ -10,10 +10,10 @@
10 <div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'"> 10 <div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
11 <span 11 <span
12 :class="iconBtnCls('prev', '-double')" 12 :class="iconBtnCls('prev', '-double')"
13 - @click="prevYear"><Icon type="ios-arrow-left"></Icon></span> 13 + @click="changeYear(-1)"><Icon type="ios-arrow-left"></Icon></span>
14 <span 14 <span
15 :class="iconBtnCls('prev')" 15 :class="iconBtnCls('prev')"
16 - @click="prevMonth" 16 + @click="changeMonth(-1)"
17 v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span> 17 v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
18 <span 18 <span
19 :class="[datePrefixCls + '-header-label']" 19 :class="[datePrefixCls + '-header-label']"
@@ -24,10 +24,10 @@ @@ -24,10 +24,10 @@
24 v-show="currentView === 'date'">{{ monthLabel }}</span> 24 v-show="currentView === 'date'">{{ monthLabel }}</span>
25 <span 25 <span
26 :class="iconBtnCls('next', '-double')" 26 :class="iconBtnCls('next', '-double')"
27 - @click="nextYear"><Icon type="ios-arrow-right"></Icon></span> 27 + @click="changeYear(+1)"><Icon type="ios-arrow-right"></Icon></span>
28 <span 28 <span
29 :class="iconBtnCls('next')" 29 :class="iconBtnCls('next')"
30 - @click="nextMonth" 30 + @click="changeMonth(+1)"
31 v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span> 31 v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
32 </div> 32 </div>
33 <div :class="[prefixCls + '-content']"> 33 <div :class="[prefixCls + '-content']">
@@ -87,7 +87,7 @@ @@ -87,7 +87,7 @@
87 import Mixin from './mixin'; 87 import Mixin from './mixin';
88 import Locale from '../../../mixins/locale'; 88 import Locale from '../../../mixins/locale';
89 89
90 - import { initTimeDate } from '../util'; 90 + import { initTimeDate, siblingMonth } from '../util';
91 91
92 const prefixCls = 'ivu-picker-panel'; 92 const prefixCls = 'ivu-picker-panel';
93 const datePrefixCls = 'ivu-date-picker'; 93 const datePrefixCls = 'ivu-date-picker';
@@ -144,8 +144,7 @@ @@ -144,8 +144,7 @@
144 newVal = new Date(newVal); 144 newVal = new Date(newVal);
145 if (!isNaN(newVal)) { 145 if (!isNaN(newVal)) {
146 this.date = newVal; 146 this.date = newVal;
147 - this.year = newVal.getFullYear();  
148 - this.month = newVal.getMonth(); 147 + this.setMonthYear(newVal);
149 } 148 }
150 if (this.showTime) this.$refs.timePicker.value = newVal; 149 if (this.showTime) this.$refs.timePicker.value = newVal;
151 }, 150 },
@@ -163,6 +162,10 @@ @@ -163,6 +162,10 @@
163 resetDate () { 162 resetDate () {
164 this.date = new Date(this.date); 163 this.date = new Date(this.date);
165 }, 164 },
  165 + setMonthYear(date){
  166 + this.month = date.getMonth();
  167 + this.year = date.getFullYear();
  168 + },
166 handleClear () { 169 handleClear () {
167 this.date = new Date(); 170 this.date = new Date();
168 this.$emit('on-pick', ''); 171 this.$emit('on-pick', '');
@@ -178,42 +181,20 @@ @@ -178,42 +181,20 @@
178 this.currentView = 'date'; 181 this.currentView = 'date';
179 } 182 }
180 } 183 }
181 -  
182 - this.year = this.date.getFullYear();  
183 - this.month = this.date.getMonth(); 184 + this.setMonthYear(this.date);
184 if (reset) this.isTime = false; 185 if (reset) this.isTime = false;
185 }, 186 },
186 - prevYear () { 187 + changeYear(dir){
187 if (this.currentView === 'year') { 188 if (this.currentView === 'year') {
188 - this.$refs.yearTable.prevTenYear(); 189 + this.$refs.yearTable[dir == 1 ? 'nextTenYear' : 'prevTenYear']();
189 } else { 190 } else {
190 - this.year--;  
191 - this.date.setFullYear(this.year);  
192 - this.resetDate(); 191 + this.year+= dir;
  192 + this.date = siblingMonth(this.date, dir * 12);
193 } 193 }
194 }, 194 },
195 - nextYear () {  
196 - if (this.currentView === 'year') {  
197 - this.$refs.yearTable.nextTenYear();  
198 - } else {  
199 - this.year++;  
200 - this.date.setFullYear(this.year);  
201 - this.resetDate();  
202 - }  
203 - },  
204 - prevMonth () {  
205 - this.month--;  
206 - if (this.month < 0) {  
207 - this.month = 11;  
208 - this.year--;  
209 - }  
210 - },  
211 - nextMonth () {  
212 - this.month++;  
213 - if (this.month > 11) {  
214 - this.month = 0;  
215 - this.year++;  
216 - } 195 + changeMonth(dir){
  196 + this.date = siblingMonth(this.date, dir);
  197 + this.setMonthYear(this.date);
217 }, 198 },
218 showYearPicker () { 199 showYearPicker () {
219 this.currentView = 'year'; 200 this.currentView = 'year';
@@ -245,13 +226,11 @@ @@ -245,13 +226,11 @@
245 }, 226 },
246 handleMonthPick (month) { 227 handleMonthPick (month) {
247 this.month = month; 228 this.month = month;
248 - const selectionMode = this.selectionMode;  
249 - if (selectionMode !== 'month') {  
250 - this.date.setMonth(month); 229 + this.date.setMonth(month);
  230 + if (this.selectionMode !== 'month') {
251 this.currentView = 'date'; 231 this.currentView = 'date';
252 this.resetDate(); 232 this.resetDate();
253 } else { 233 } else {
254 - this.date.setMonth(month);  
255 this.year && this.date.setFullYear(this.year); 234 this.year && this.date.setFullYear(this.year);
256 this.resetDate(); 235 this.resetDate();
257 const value = new Date(this.date.getFullYear(), month, 1); 236 const value = new Date(this.date.getFullYear(), month, 1);
@@ -261,12 +240,8 @@ @@ -261,12 +240,8 @@
261 handleDatePick (value) { 240 handleDatePick (value) {
262 if (this.selectionMode === 'day') { 241 if (this.selectionMode === 'day') {
263 this.$emit('on-pick', new Date(value.getTime())); 242 this.$emit('on-pick', new Date(value.getTime()));
264 - this.date.setFullYear(value.getFullYear());  
265 - this.date.setMonth(value.getMonth());  
266 - this.date.setDate(value.getDate()); 243 + this.date = new Date(value);
267 } 244 }
268 -  
269 - this.resetDate();  
270 }, 245 },
271 handleTimePick (date) { 246 handleTimePick (date) {
272 this.handleDatePick(date); 247 this.handleDatePick(date);
@@ -278,8 +253,7 @@ @@ -278,8 +253,7 @@
278 } 253 }
279 254
280 if (this.date && !this.year) { 255 if (this.date && !this.year) {
281 - this.year = this.date.getFullYear();  
282 - this.month = this.date.getMonth(); 256 + this.setMonthYear(this.date);
283 } 257 }
284 if (this.showTime) { 258 if (this.showTime) {
285 // todo 这里可能有问题，并不能进入到这里，但不影响正常使用 259 // todo 这里可能有问题，并不能进入到这里，但不影响正常使用