other / mew-iview

Commit 472b4ff1503b816f47bbdca370e2854b1fbc200a

Authored by 梁灏
1 parent 3cf7cfd1

update DatePicker 

update DatePicker
Showing 5 changed files with 122 additions and 69 deletions   Show diff stats
Inline Side-by-side
src/components/date-picker/base/date-table.vue
  Show/Hide comments   View file @472b4ff
... ... @@ -47,15 +47,39 @@
47 47 prefixCls: prefixCls
48 48 }
49 49 },
  50 + watch: {
  51 + 'rangeState.endDate' (newVal) {
  52 + this.markRange(newVal);
  53 + },
  54 + minDate(newVal, oldVal) {
  55 + if (newVal && !oldVal) {
  56 + this.rangeState.selecting = true;
  57 + this.markRange(newVal);
  58 + } else if (!newVal) {
  59 + this.rangeState.selecting = false;
  60 + this.markRange(newVal);
  61 + } else {
  62 + this.markRange();
  63 + }
  64 + },
  65 + maxDate(newVal, oldVal) {
  66 + if (newVal && !oldVal) {
  67 + this.rangeState.selecting = false;
  68 + this.markRange(newVal);
  69 + // todo 待验证
  70 + this.$emit('on-pick', {
  71 + minDate: this.minDate,
  72 + maxDate: this.maxDate
  73 + });
  74 + }
  75 + }
  76 + },
50 77 computed: {
51 78 classes () {
52 79 return [
53 80 `${prefixCls}`
54 81 ]
55 82 },
56   - startDate() {
57   - return getStartDateOfMonth(this.year, this.month);
58   - },
59 83 cells () {
60 84 const date = new Date(this.year, this.month, 1);
61 85 let day = getFirstDayOfMonth(date); // day of first day
... ... @@ -133,42 +157,47 @@
133 157 }
134 158 },
135 159 methods: {
  160 + getDateOfCell (cell) {
  161 + let year = this.year;
  162 + let month = this.month;
  163 + let day = cell.text;
  164 +
  165 + if (cell.type === 'prev-month') {
  166 + if (month === 0) {
  167 + month = 11;
  168 + year--;
  169 + } else {
  170 + month--;
  171 + }
  172 + } else if (cell.type === 'next-month') {
  173 + if (month === 11) {
  174 + month = 0;
  175 + year++;
  176 + } else {
  177 + month++;
  178 + }
  179 + }
  180 +
  181 + return new Date(year, month, day);
  182 + },
136 183 handleClick (event) {
137 184 const target = event.target;
138 185 if (target.tagName === 'EM') {
139 186 const cell = this.cells[parseInt(event.target.getAttribute('index'))];
140 187 if (cell.disabled) return;
141 188  
142   - let year = this.year;
143   - let month = this.month;
144   - let day = cell.text;
145 189  
146   - if (cell.type === 'prev-month') {
147   - if (month === 0) {
148   - month = 11;
149   - year--;
150   - } else {
151   - month--;
152   - }
153   - } else if (cell.type === 'next-month') {
154   - if (month === 11) {
155   - month = 0;
156   - year++;
157   - } else {
158   - month++;
159   - }
160   - }
161 190  
162   - const newDate = new Date(year, month, day);
  191 + const newDate = this.getDateOfCell(cell);
163 192  
164 193 if (this.selectionMode === 'range') {
165   - // todo
166 194 if (this.minDate && this.maxDate) {
167 195 const minDate = new Date(newDate.getTime());
168 196 const maxDate = null;
169   - this.$emit('on-pick', {minDate, maxDate}, false);
170 197 this.rangeState.selecting = true;
171 198 this.markRange(this.minDate);
  199 +
  200 + this.$emit('on-pick', {minDate, maxDate}, false);
172 201 } else if (this.minDate && !this.maxDate) {
173 202 if (newDate >= this.minDate) {
174 203 const maxDate = new Date(newDate.getTime());
... ... @@ -182,41 +211,47 @@
182 211 }
183 212 } else if (!this.minDate) {
184 213 const minDate = new Date(newDate.getTime());
185   -
186   - this.$emit('on-pick', {minDate, maxDate: this.maxDate}, false);
187 214 this.rangeState.selecting = true;
188 215 this.markRange(this.minDate);
  216 +
  217 + this.$emit('on-pick', {minDate, maxDate: this.maxDate}, false);
189 218 }
190 219 } else {
191 220 this.$emit('on-pick', newDate);
192 221 }
193 222 }
194 223 },
195   - handleMouseMove () {
  224 + handleMouseMove (event) {
  225 + if (!this.rangeState.selecting) return;
196 226  
  227 + this.$emit('on-changerange', {
  228 + minDate: this.minDate,
  229 + maxDate: this.maxDate,
  230 + rangeState: this.rangeState
  231 + });
  232 +
  233 + const target = event.target;
  234 + if (target.tagName === 'EM') {
  235 + const cell = this.cells[parseInt(event.target.getAttribute('index'))];
  236 +// if (cell.disabled) return; // todo 待确定
  237 + this.rangeState.endDate = this.getDateOfCell(cell);
  238 + }
197 239 },
198 240 markRange (maxDate) {
199   - const startDate = this.startDate;
200   - if (!maxDate) {
201   - maxDate = this.maxDate;
202   - }
203   -
204   - const rows = this.rows;
205 241 const minDate = this.minDate;
206   - for (var i = 0, k = rows.length; i < k; i++) {
207   - const row = rows[i];
208   - for (var j = 0, l = row.length; j < l; j++) {
209   - if (this.showWeekNumber && j === 0) continue;
210   -
211   - const cell = row[j];
212   - const index = i * 7 + j + (this.showWeekNumber ? -1 : 0);
213   - const time = startDate.getTime() + DAY_DURATION * index;
214   -
215   - cell.inRange = minDate && time >= clearHours(minDate) && time <= clearHours(maxDate);
216   - cell.start = minDate && time === clearHours(minDate.getTime());
217   - cell.end = maxDate && time === clearHours(maxDate.getTime());
  242 + if (!maxDate) maxDate = this.maxDate;
  243 +
  244 + const minDay = clearHours(new Date(minDate));
  245 + const maxDay = clearHours(new Date(maxDate));
  246 +
  247 + this.cells.forEach(cell => {
  248 + if (cell.type === 'today' || cell.type === 'normal') {
  249 + const time = clearHours(new Date(this.year, this.month, cell.text));
  250 + cell.range = time >= minDay && time <= maxDay;
  251 + cell.start = minDate && time === minDay;
  252 + cell.end = maxDate && time === maxDay;
218 253 }
219   - }
  254 + });
220 255 },
221 256 getCellCls (cell) {
222 257 return [
... ...
src/components/date-picker/panel/date-range.vue
  Show/Hide comments   View file @472b4ff
... ... @@ -32,9 +32,10 @@
32 32 :min-date="minDate"
33 33 :max-date="maxDate"
34 34 :range-state="rangeState"
35   - :selection-mode="selectionMode"
  35 + selection-mode="range"
36 36 :disabled-date="disabledDate"
37   - @on-pick="handleDatePick"></date-table>
  37 + @on-changerange="handleChangeRange"
  38 + @on-pick="handleRangePick"></date-table>
38 39 </div>
39 40 <div :class="[prefixCls + '-content', prefixCls + '-content-right']">
40 41 <div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
... ... @@ -61,9 +62,10 @@
61 62 :min-date="minDate"
62 63 :max-date="maxDate"
63 64 :range-state="rangeState"
64   - :selection-mode="selectionMode"
  65 + selection-mode="range"
65 66 :disabled-date="disabledDate"
66   - @on-pick="handleDatePick"></date-table>
  67 + @on-changerange="handleChangeRange"
  68 + @on-pick="handleRangePick"></date-table>
67 69 </div>
68 70 </div>
69 71 </div>
... ... @@ -150,6 +152,11 @@
150 152 }
151 153 },
152 154 methods: {
  155 + handleClear() {
  156 + this.minDate = null;
  157 + this.maxDate = null;
  158 + this.handleConfirm();
  159 + },
153 160 prevYear () {
154 161  
155 162 },
... ... @@ -168,11 +175,24 @@
168 175 showMonthPicker () {
169 176  
170 177 },
171   - handleDatePick () {
172   -
173   - },
174 178 handleConfirm(visible) {
175 179 this.$emit('on-pick', [this.minDate, this.maxDate], visible);
  180 + },
  181 + handleRangePick (val, close = true) {
  182 + if (this.maxDate === val.maxDate && this.minDate === val.minDate) return;
  183 +
  184 + this.minDate = val.minDate;
  185 + this.maxDate = val.maxDate;
  186 +
  187 + if (!close) return;
  188 + if (!this.showTime) {
  189 + this.handleConfirm(false);
  190 + }
  191 + },
  192 + handleChangeRange (val) {
  193 + this.minDate = val.minDate;
  194 + this.maxDate = val.maxDate;
  195 + this.rangeState = val.rangeState;
176 196 }
177 197 }
178 198 }
... ...
src/components/date-picker/panel/date.vue
  Show/Hide comments   View file @472b4ff
... ... @@ -208,18 +208,6 @@
208 208 }
209 209  
210 210 this.resetDate();
211   - },
212   - resetView() {
213   - if (this.selectionMode === 'month') {
214   - this.currentView = 'month';
215   - } else if (this.selectionMode === 'year') {
216   - this.currentView = 'year';
217   - } else {
218   - this.currentView = 'date';
219   - }
220   -
221   - this.year = this.date.getFullYear();
222   - this.month = this.date.getMonth();
223 211 }
224 212 },
225 213 compiled () {
... ...
src/components/date-picker/panel/mixin.js
  Show/Hide comments   View file @472b4ff
... ... @@ -13,6 +13,18 @@ export default {
13 13 handleShortcutClick (shortcut) {
14 14 if (shortcut.value) this.$emit('on-pick', shortcut.value());
15 15 if (shortcut.onClick) shortcut.onClick(this);
  16 + },
  17 + resetView() {
  18 + if (this.selectionMode === 'month') {
  19 + this.currentView = 'month';
  20 + } else if (this.selectionMode === 'year') {
  21 + this.currentView = 'year';
  22 + } else {
  23 + this.currentView = 'date';
  24 + }
  25 +
  26 + this.year = this.date.getFullYear();
  27 + this.month = this.date.getMonth();
16 28 }
17 29 }
18 30 }
19 31 \ No newline at end of file
... ...
src/components/date-picker/picker.vue
  Show/Hide comments   View file @472b4ff
... ... @@ -194,9 +194,7 @@
194 194 return PLACEMENT_MAP[this.align];
195 195 },
196 196 selectionMode() {
197   - if (this.type === 'week') {
198   - return 'week';
199   - } else if (this.type === 'month') {
  197 + if (this.type === 'month') {
200 198 return 'month';
201 199 } else if (this.type === 'year') {
202 200 return 'year';
... ... @@ -307,7 +305,7 @@
307 305 this.picker.resetView && this.picker.resetView();
308 306 });
309 307  
310   - // todo $on('on-range')
  308 + // todo $on('on-time-range')
311 309 }
312 310 if (this.internalValue instanceof Date) {
313 311 this.picker.date = new Date(this.internalValue.getTime());
... ...