other / mew-iview

Commit 3732707ede132f82dcf990b8f9f7dc0d481459b5

Authored by 梁灏
1 parent 0a5c5f41

update DatePicker 

update DatePicker
Showing 1 changed file with 53 additions and 20 deletions   Show diff stats
Inline Side-by-side
src/components/date-picker/panel/date-range.vue
  Show/Hide comments   View file @3732707
... ... @@ -43,8 +43,8 @@
43 43 <year-table
44 44 v-ref:left-year-table
45 45 v-show="leftCurrentView === 'year'"
46   - :year="leftYear"
47   - :date="date"
  46 + :year="leftTableYear"
  47 + :date="leftTableDate"
48 48 selection-mode="range"
49 49 :disabled-date="disabledDate"
50 50 @on-pick="handleLeftYearPick"></year-table>
... ... @@ -52,7 +52,7 @@
52 52 v-ref:left-month-table
53 53 v-show="leftCurrentView === 'month'"
54 54 :month="leftMonth"
55   - :date="date"
  55 + :date="leftTableDate"
56 56 selection-mode="range"
57 57 :disabled-date="disabledDate"
58 58 @on-pick="handleLeftMonthPick"></month-table>
... ... @@ -93,8 +93,8 @@
93 93 <year-table
94 94 v-ref:right-year-table
95 95 v-show="rightCurrentView === 'year'"
96   - :year="rightYear"
97   - :date="rightDate"
  96 + :year="rightTableYear"
  97 + :date="rightTableDate"
98 98 selection-mode="range"
99 99 :disabled-date="disabledDate"
100 100 @on-pick="handleRightYearPick"></year-table>
... ... @@ -102,7 +102,7 @@
102 102 v-ref:right-month-table
103 103 v-show="rightCurrentView === 'month'"
104 104 :month="rightMonth"
105   - :date="rightDate"
  105 + :date="rightTableDate"
106 106 selection-mode="range"
107 107 :disabled-date="disabledDate"
108 108 @on-pick="handleRightMonthPick"></month-table>
... ... @@ -142,7 +142,9 @@
142 142 disabledDate: '',
143 143 leftCurrentView: 'date',
144 144 rightCurrentView: 'date',
145   - selectionMode: 'range'
  145 + selectionMode: 'range',
  146 + leftTableYear: null,
  147 + rightTableYear: null
146 148 }
147 149 },
148 150 computed: {
... ... @@ -155,37 +157,57 @@
155 157 }
156 158 ]
157 159 },
158   - leftYear() {
  160 + leftYear () {
159 161 return this.date.getFullYear();
160 162 },
  163 + leftTableDate () {
  164 + if (this.leftCurrentView === 'year' || this.leftCurrentView === 'month') {
  165 + return new Date(this.leftTableYear);
  166 + } else {
  167 + return this.date;
  168 + }
  169 + },
161 170 leftYearLabel () {
162   - const year = this.leftYear;
163   - if (!year) return '';
164 171 if (this.leftCurrentView === 'year') {
  172 + const year = this.leftTableYear;
  173 + if (!year) return '';
165 174 const startYear = Math.floor(year / 10) * 10;
166 175 return `${startYear}年 - ${startYear + 9}年`;
  176 + } else {
  177 + const year = this.leftCurrentView === 'month' ? this.leftTableYear : this.leftYear;
  178 + if (!year) return '';
  179 + return `${year}年`;
167 180 }
168   - return `${year}年`;
169 181 },
170   - leftMonth() {
  182 + leftMonth () {
171 183 return this.date.getMonth();
172 184 },
173   - rightYear() {
  185 + rightYear () {
174 186 return this.rightDate.getFullYear();
175 187 },
  188 + rightTableDate () {
  189 + if (this.rightCurrentView === 'year' || this.rightCurrentView === 'month') {
  190 + return new Date(this.rightTableYear);
  191 + } else {
  192 + return this.date;
  193 + }
  194 + },
176 195 rightYearLabel () {
177   - const year = this.rightYear;
178   - if (!year) return '';
179 196 if (this.rightCurrentView === 'year') {
  197 + const year = this.rightTableYear;
  198 + if (!year) return '';
180 199 const startYear = Math.floor(year / 10) * 10;
181 200 return `${startYear}年 - ${startYear + 9}年`;
  201 + } else {
  202 + const year = this.rightCurrentView === 'month' ? this.rightTableYear : this.rightYear;
  203 + if (!year) return '';
  204 + return `${year}年`;
182 205 }
183   - return `${year}年`;
184 206 },
185   - rightMonth() {
  207 + rightMonth () {
186 208 return this.rightDate.getMonth();
187 209 },
188   - rightDate() {
  210 + rightDate () {
189 211 const newDate = new Date(this.date);
190 212 const month = newDate.getMonth();
191 213 newDate.setDate(1);
... ... @@ -248,8 +270,7 @@
248 270 this.handleYearPick(year, close, 'right');
249 271 },
250 272 handleYearPick (year, close, direction) {
251   - this.date.setFullYear(year);
252   - this.resetDate();
  273 + this[`${direction}TableYear`] = year;
253 274 if (!close) return;
254 275  
255 276 this[`${direction}CurrentView`] = 'month';
... ... @@ -261,12 +282,24 @@
261 282 this.handleMonthPick(month, 'right');
262 283 },
263 284 handleMonthPick (month, direction) {
  285 + let year = this[`${direction}TableYear`];
  286 + if (direction === 'right') {
  287 + if (month === 0) {
  288 + month = 11;
  289 + year--;
  290 + } else {
  291 + month--;
  292 + }
  293 + }
  294 +
  295 + this.date.setYear(year);
264 296 this.date.setMonth(month);
265 297 this[`${direction}CurrentView`] = 'date';
266 298 this.resetDate();
267 299 },
268 300 showYearPicker (direction) {
269 301 this[`${direction}CurrentView`] = 'year';
  302 + this[`${direction}TableYear`] = this[`${direction}Year`];
270 303 },
271 304 showMonthPicker (direction) {
272 305 this[`${direction}CurrentView`] = 'month';
... ...