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,8 +43,8 @@
43 <year-table 43 <year-table
44 v-ref:left-year-table 44 v-ref:left-year-table
45 v-show="leftCurrentView === 'year'" 45 v-show="leftCurrentView === 'year'"
46 - :year="leftYear"  
47 - :date="date" 46 + :year="leftTableYear"
  47 + :date="leftTableDate"
48 selection-mode="range" 48 selection-mode="range"
49 :disabled-date="disabledDate" 49 :disabled-date="disabledDate"
50 @on-pick="handleLeftYearPick"></year-table> 50 @on-pick="handleLeftYearPick"></year-table>
@@ -52,7 +52,7 @@ @@ -52,7 +52,7 @@
52 v-ref:left-month-table 52 v-ref:left-month-table
53 v-show="leftCurrentView === 'month'" 53 v-show="leftCurrentView === 'month'"
54 :month="leftMonth" 54 :month="leftMonth"
55 - :date="date" 55 + :date="leftTableDate"
56 selection-mode="range" 56 selection-mode="range"
57 :disabled-date="disabledDate" 57 :disabled-date="disabledDate"
58 @on-pick="handleLeftMonthPick"></month-table> 58 @on-pick="handleLeftMonthPick"></month-table>
@@ -93,8 +93,8 @@ @@ -93,8 +93,8 @@
93 <year-table 93 <year-table
94 v-ref:right-year-table 94 v-ref:right-year-table
95 v-show="rightCurrentView === 'year'" 95 v-show="rightCurrentView === 'year'"
96 - :year="rightYear"  
97 - :date="rightDate" 96 + :year="rightTableYear"
  97 + :date="rightTableDate"
98 selection-mode="range" 98 selection-mode="range"
99 :disabled-date="disabledDate" 99 :disabled-date="disabledDate"
100 @on-pick="handleRightYearPick"></year-table> 100 @on-pick="handleRightYearPick"></year-table>
@@ -102,7 +102,7 @@ @@ -102,7 +102,7 @@
102 v-ref:right-month-table 102 v-ref:right-month-table
103 v-show="rightCurrentView === 'month'" 103 v-show="rightCurrentView === 'month'"
104 :month="rightMonth" 104 :month="rightMonth"
105 - :date="rightDate" 105 + :date="rightTableDate"
106 selection-mode="range" 106 selection-mode="range"
107 :disabled-date="disabledDate" 107 :disabled-date="disabledDate"
108 @on-pick="handleRightMonthPick"></month-table> 108 @on-pick="handleRightMonthPick"></month-table>
@@ -142,7 +142,9 @@ @@ -142,7 +142,9 @@
142 disabledDate: '', 142 disabledDate: '',
143 leftCurrentView: 'date', 143 leftCurrentView: 'date',
144 rightCurrentView: 'date', 144 rightCurrentView: 'date',
145 - selectionMode: 'range' 145 + selectionMode: 'range',
  146 + leftTableYear: null,
  147 + rightTableYear: null
146 } 148 }
147 }, 149 },
148 computed: { 150 computed: {
@@ -155,37 +157,57 @@ @@ -155,37 +157,57 @@
155 } 157 }
156 ] 158 ]
157 }, 159 },
158 - leftYear() { 160 + leftYear () {
159 return this.date.getFullYear(); 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 leftYearLabel () { 170 leftYearLabel () {
162 - const year = this.leftYear;  
163 - if (!year) return '';  
164 if (this.leftCurrentView === 'year') { 171 if (this.leftCurrentView === 'year') {
  172 + const year = this.leftTableYear;
  173 + if (!year) return '';
165 const startYear = Math.floor(year / 10) * 10; 174 const startYear = Math.floor(year / 10) * 10;
166 return `${startYear}年 - ${startYear + 9}年`; 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 return this.date.getMonth(); 183 return this.date.getMonth();
172 }, 184 },
173 - rightYear() { 185 + rightYear () {
174 return this.rightDate.getFullYear(); 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 rightYearLabel () { 195 rightYearLabel () {
177 - const year = this.rightYear;  
178 - if (!year) return '';  
179 if (this.rightCurrentView === 'year') { 196 if (this.rightCurrentView === 'year') {
  197 + const year = this.rightTableYear;
  198 + if (!year) return '';
180 const startYear = Math.floor(year / 10) * 10; 199 const startYear = Math.floor(year / 10) * 10;
181 return `${startYear}年 - ${startYear + 9}年`; 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 return this.rightDate.getMonth(); 208 return this.rightDate.getMonth();
187 }, 209 },
188 - rightDate() { 210 + rightDate () {
189 const newDate = new Date(this.date); 211 const newDate = new Date(this.date);
190 const month = newDate.getMonth(); 212 const month = newDate.getMonth();
191 newDate.setDate(1); 213 newDate.setDate(1);
@@ -248,8 +270,7 @@ @@ -248,8 +270,7 @@
248 this.handleYearPick(year, close, 'right'); 270 this.handleYearPick(year, close, 'right');
249 }, 271 },
250 handleYearPick (year, close, direction) { 272 handleYearPick (year, close, direction) {
251 - this.date.setFullYear(year);  
252 - this.resetDate(); 273 + this[`${direction}TableYear`] = year;
253 if (!close) return; 274 if (!close) return;
254 275
255 this[`${direction}CurrentView`] = 'month'; 276 this[`${direction}CurrentView`] = 'month';
@@ -261,12 +282,24 @@ @@ -261,12 +282,24 @@
261 this.handleMonthPick(month, 'right'); 282 this.handleMonthPick(month, 'right');
262 }, 283 },
263 handleMonthPick (month, direction) { 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 this.date.setMonth(month); 296 this.date.setMonth(month);
265 this[`${direction}CurrentView`] = 'date'; 297 this[`${direction}CurrentView`] = 'date';
266 this.resetDate(); 298 this.resetDate();
267 }, 299 },
268 showYearPicker (direction) { 300 showYearPicker (direction) {
269 this[`${direction}CurrentView`] = 'year'; 301 this[`${direction}CurrentView`] = 'year';
  302 + this[`${direction}TableYear`] = this[`${direction}Year`];
270 }, 303 },
271 showMonthPicker (direction) { 304 showMonthPicker (direction) {
272 this[`${direction}CurrentView`] = 'month'; 305 this[`${direction}CurrentView`] = 'month';