update DatePicker

update DatePicker

src/components/date-picker/base/date-table.vue

@@ -47,15 +47,39 @@
                 prefixCls: prefixCls
             }
         },
+        watch: {
+            'rangeState.endDate' (newVal) {
+                this.markRange(newVal);
+            },
+            minDate(newVal, oldVal) {
+                if (newVal && !oldVal) {
+                    this.rangeState.selecting = true;
+                    this.markRange(newVal);
+                } else if (!newVal) {
+                    this.rangeState.selecting = false;
+                    this.markRange(newVal);
+                } else {
+                    this.markRange();
+                }
+            },
+            maxDate(newVal, oldVal) {
+                if (newVal && !oldVal) {
+                    this.rangeState.selecting = false;
+                    this.markRange(newVal);
+                    // todo 待验证
+                    this.$emit('on-pick', {
+                        minDate: this.minDate,
+                        maxDate: this.maxDate
+                    });
+                }
+            }
+        },
         computed: {
             classes () {
                 return [
                     `${prefixCls}`
                 ]
             },
-            startDate() {
-                return getStartDateOfMonth(this.year, this.month);
-            },
             cells () {
                 const date = new Date(this.year, this.month, 1);
                 let day = getFirstDayOfMonth(date);    // day of first day
@@ -133,12 +157,7 @@
             }
         },
         methods: {
-            handleClick (event) {
+            getDateOfCell (cell) {
-                const target = event.target;
-                if (target.tagName === 'EM') {
-                    const cell = this.cells[parseInt(event.target.getAttribute('index'))];
-                    if (cell.disabled) return;
-
                 let year = this.year;
                 let month = this.month;
                 let day = cell.text;
@@ -159,16 +178,26 @@
                     }
                 }
 
-                    const newDate = new Date(year, month, day);
+                return new Date(year, month, day);
+            },
+            handleClick (event) {
+                const target = event.target;
+                if (target.tagName === 'EM') {
+                    const cell = this.cells[parseInt(event.target.getAttribute('index'))];
+                    if (cell.disabled) return;
+
+
+
+                    const newDate = this.getDateOfCell(cell);
 
                     if (this.selectionMode === 'range') {
-                        // todo
                         if (this.minDate && this.maxDate) {
                             const minDate = new Date(newDate.getTime());
                             const maxDate = null;
-                            this.$emit('on-pick', {minDate, maxDate}, false);
                             this.rangeState.selecting = true;
                             this.markRange(this.minDate);
+
+                            this.$emit('on-pick', {minDate, maxDate}, false);
                         } else if (this.minDate && !this.maxDate) {
                             if (newDate >= this.minDate) {
                                 const maxDate = new Date(newDate.getTime());
@@ -182,41 +211,47 @@
                             }
                         } else if (!this.minDate) {
                             const minDate = new Date(newDate.getTime());
-
-                            this.$emit('on-pick', {minDate, maxDate: this.maxDate}, false);
                             this.rangeState.selecting = true;
                             this.markRange(this.minDate);
+
+                            this.$emit('on-pick', {minDate, maxDate: this.maxDate}, false);
                         }
                     } else {
                         this.$emit('on-pick', newDate);
                     }
                 }
             },
-            handleMouseMove () {
+            handleMouseMove (event) {
+                if (!this.rangeState.selecting) return;
 
+                this.$emit('on-changerange', {
+                    minDate: this.minDate,
+                    maxDate: this.maxDate,
+                    rangeState: this.rangeState
+                });
+
+                const target = event.target;
+                if (target.tagName === 'EM') {
+                    const cell = this.cells[parseInt(event.target.getAttribute('index'))];
+//                    if (cell.disabled) return;    // todo 待确定
+                    this.rangeState.endDate = this.getDateOfCell(cell);
+                }
             },
             markRange (maxDate) {
-                const startDate = this.startDate;
-                if (!maxDate) {
-                    maxDate = this.maxDate;
-                }
-
-                const rows = this.rows;
                 const minDate = this.minDate;
-                for (var i = 0, k = rows.length; i < k; i++) {
+                if (!maxDate) maxDate = this.maxDate;
-                    const row = rows[i];
-                    for (var j = 0, l = row.length; j < l; j++) {
-                        if (this.showWeekNumber && j === 0) continue;
 
-                        const cell = row[j];
+                const minDay = clearHours(new Date(minDate));
-                        const index = i * 7 + j + (this.showWeekNumber ? -1 : 0);
+                const maxDay = clearHours(new Date(maxDate));
-                        const time = startDate.getTime() + DAY_DURATION * index;
 
-                        cell.inRange = minDate && time >= clearHours(minDate) && time <= clearHours(maxDate);
+                this.cells.forEach(cell => {
-                        cell.start = minDate && time === clearHours(minDate.getTime());
+                    if (cell.type === 'today' || cell.type === 'normal') {
-                        cell.end = maxDate && time === clearHours(maxDate.getTime());
+                        const time = clearHours(new Date(this.year, this.month, cell.text));
-                    }
+                        cell.range = time >= minDay && time <= maxDay;
+                        cell.start = minDate && time === minDay;
+                        cell.end = maxDate && time === maxDay;
                     }
+                });
             },
             getCellCls (cell) {
                 return [

src/components/date-picker/panel/date-range.vue

@@ -32,9 +32,10 @@
                     :min-date="minDate"
                     :max-date="maxDate"
                     :range-state="rangeState"
-                    :selection-mode="selectionMode"
+                    selection-mode="range"
                     :disabled-date="disabledDate"
-                    @on-pick="handleDatePick"></date-table>
+                    @on-changerange="handleChangeRange"
+                    @on-pick="handleRangePick"></date-table>
             </div>
             <div :class="[prefixCls + '-content', prefixCls + '-content-right']">
                 <div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
@@ -61,9 +62,10 @@
                     :min-date="minDate"
                     :max-date="maxDate"
                     :range-state="rangeState"
-                    :selection-mode="selectionMode"
+                    selection-mode="range"
                     :disabled-date="disabledDate"
-                    @on-pick="handleDatePick"></date-table>
+                    @on-changerange="handleChangeRange"
+                    @on-pick="handleRangePick"></date-table>
             </div>
         </div>
     </div>
@@ -150,6 +152,11 @@
             }
         },
         methods: {
+            handleClear() {
+                this.minDate = null;
+                this.maxDate = null;
+                this.handleConfirm();
+            },
             prevYear () {
 
             },
@@ -167,12 +174,25 @@
             },
             showMonthPicker () {
 
-            },
-            handleDatePick () {
-
             },
             handleConfirm(visible) {
                 this.$emit('on-pick', [this.minDate, this.maxDate], visible);
+            },
+            handleRangePick (val, close = true) {
+                if (this.maxDate === val.maxDate && this.minDate === val.minDate) return;
+
+                this.minDate = val.minDate;
+                this.maxDate = val.maxDate;
+
+                if (!close) return;
+                if (!this.showTime) {
+                    this.handleConfirm(false);
+                }
+            },
+            handleChangeRange (val) {
+                this.minDate = val.minDate;
+                this.maxDate = val.maxDate;
+                this.rangeState = val.rangeState;
             }
         }
     }

src/components/date-picker/panel/date.vue

@@ -208,18 +208,6 @@
                 }
 
                 this.resetDate();
-            },
-            resetView() {
-                if (this.selectionMode === 'month') {
-                    this.currentView = 'month';
-                } else if (this.selectionMode === 'year') {
-                    this.currentView = 'year';
-                } else {
-                    this.currentView = 'date';
-                }
-
-                this.year = this.date.getFullYear();
-                this.month = this.date.getMonth();
             }
         },
         compiled () {

src/components/date-picker/panel/mixin.js

@@ -13,6 +13,18 @@ export default {
         handleShortcutClick (shortcut) {
             if (shortcut.value) this.$emit('on-pick', shortcut.value());
             if (shortcut.onClick) shortcut.onClick(this);
+        },
+        resetView() {
+            if (this.selectionMode === 'month') {
+                this.currentView = 'month';
+            } else if (this.selectionMode === 'year') {
+                this.currentView = 'year';
+            } else {
+                this.currentView = 'date';
+            }
+
+            this.year = this.date.getFullYear();
+            this.month = this.date.getMonth();
         }
     }
 }

src/components/date-picker/picker.vue

@@ -194,9 +194,7 @@
                 return PLACEMENT_MAP[this.align];
             },
             selectionMode() {
-                if (this.type === 'week') {
+                if (this.type === 'month') {
-                    return 'week';
-                } else if (this.type === 'month') {
                     return 'month';
                 } else if (this.type === 'year') {
                     return 'year';
@@ -307,7 +305,7 @@
                         this.picker.resetView && this.picker.resetView();
                     });
 
-                    // todo $on('on-range')
+                    // todo $on('on-time-range')
                 }
                 if (this.internalValue instanceof Date) {
                     this.picker.date = new Date(this.internalValue.getTime());