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 <div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
11 11 <span
12 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 14 <span
15 15 :class="iconBtnCls('prev')"
16   - @click="prevMonth"
  16 + @click="changeMonth(-1)"
17 17 v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
18 18 <span
19 19 :class="[datePrefixCls + '-header-label']"
... ... @@ -24,10 +24,10 @@
24 24 v-show="currentView === 'date'">{{ monthLabel }}</span>
25 25 <span
26 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 28 <span
29 29 :class="iconBtnCls('next')"
30   - @click="nextMonth"
  30 + @click="changeMonth(+1)"
31 31 v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
32 32 </div>
33 33 <div :class="[prefixCls + '-content']">
... ... @@ -87,7 +87,7 @@
87 87 import Mixin from './mixin';
88 88 import Locale from '../../../mixins/locale';
89 89  
90   - import { initTimeDate } from '../util';
  90 + import { initTimeDate, siblingMonth } from '../util';
91 91  
92 92 const prefixCls = 'ivu-picker-panel';
93 93 const datePrefixCls = 'ivu-date-picker';
... ... @@ -144,8 +144,7 @@
144 144 newVal = new Date(newVal);
145 145 if (!isNaN(newVal)) {
146 146 this.date = newVal;
147   - this.year = newVal.getFullYear();
148   - this.month = newVal.getMonth();
  147 + this.setMonthYear(newVal);
149 148 }
150 149 if (this.showTime) this.$refs.timePicker.value = newVal;
151 150 },
... ... @@ -163,6 +162,10 @@
163 162 resetDate () {
164 163 this.date = new Date(this.date);
165 164 },
  165 + setMonthYear(date){
  166 + this.month = date.getMonth();
  167 + this.year = date.getFullYear();
  168 + },
166 169 handleClear () {
167 170 this.date = new Date();
168 171 this.$emit('on-pick', '');
... ... @@ -178,42 +181,20 @@
178 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 185 if (reset) this.isTime = false;
185 186 },
186   - prevYear () {
  187 + changeYear(dir){
187 188 if (this.currentView === 'year') {
188   - this.$refs.yearTable.prevTenYear();
  189 + this.$refs.yearTable[dir == 1 ? 'nextTenYear' : 'prevTenYear']();
189 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 199 showYearPicker () {
219 200 this.currentView = 'year';
... ... @@ -245,13 +226,11 @@
245 226 },
246 227 handleMonthPick (month) {
247 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 231 this.currentView = 'date';
252 232 this.resetDate();
253 233 } else {
254   - this.date.setMonth(month);
255 234 this.year && this.date.setFullYear(this.year);
256 235 this.resetDate();
257 236 const value = new Date(this.date.getFullYear(), month, 1);
... ... @@ -261,12 +240,8 @@
261 240 handleDatePick (value) {
262 241 if (this.selectionMode === 'day') {
263 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 246 handleTimePick (date) {
272 247 this.handleDatePick(date);
... ... @@ -278,8 +253,7 @@
278 253 }
279 254  
280 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 258 if (this.showTime) {
285 259 // todo 这里可能有问题，并不能进入到这里，但不影响正常使用
... ...