diff --git a/src/components/date-picker/base/date-table.vue b/src/components/date-picker/base/date-table.vue index bfa9d5ab..d8d06db1 100644 --- a/src/components/date-picker/base/date-table.vue +++ b/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,42 +157,47 @@ } }, methods: { + getDateOfCell (cell) { + let year = this.year; + let month = this.month; + let day = cell.text; + + if (cell.type === 'prev-month') { + if (month === 0) { + month = 11; + year--; + } else { + month--; + } + } else if (cell.type === 'next-month') { + if (month === 11) { + month = 0; + year++; + } else { + month++; + } + } + + 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; - let year = this.year; - let month = this.month; - let day = cell.text; - if (cell.type === 'prev-month') { - if (month === 0) { - month = 11; - year--; - } else { - month--; - } - } else if (cell.type === 'next-month') { - if (month === 11) { - month = 0; - year++; - } else { - month++; - } - } - const newDate = new Date(year, month, day); + 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++) { - const row = rows[i]; - for (var j = 0, l = row.length; j < l; j++) { - if (this.showWeekNumber && j === 0) continue; + if (!maxDate) maxDate = this.maxDate; - const cell = row[j]; - const index = i * 7 + j + (this.showWeekNumber ? -1 : 0); - const time = startDate.getTime() + DAY_DURATION * index; + const minDay = clearHours(new Date(minDate)); + const maxDay = clearHours(new Date(maxDate)); - cell.inRange = minDate && time >= clearHours(minDate) && time <= clearHours(maxDate); - cell.start = minDate && time === clearHours(minDate.getTime()); - cell.end = maxDate && time === clearHours(maxDate.getTime()); + this.cells.forEach(cell => { + if (cell.type === 'today' || cell.type === 'normal') { + 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 [ diff --git a/src/components/date-picker/panel/date-range.vue b/src/components/date-picker/panel/date-range.vue index 3ef48993..23f07c1c 100644 --- a/src/components/date-picker/panel/date-range.vue +++ b/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"> + @on-changerange="handleChangeRange" + @on-pick="handleRangePick">
@@ -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"> + @on-changerange="handleChangeRange" + @on-pick="handleRangePick">
@@ -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; } } } diff --git a/src/components/date-picker/panel/date.vue b/src/components/date-picker/panel/date.vue index 31ffaf5f..3e810a07 100644 --- a/src/components/date-picker/panel/date.vue +++ b/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 () { diff --git a/src/components/date-picker/panel/mixin.js b/src/components/date-picker/panel/mixin.js index 1e0e3536..ebdd112e 100644 --- a/src/components/date-picker/panel/mixin.js +++ b/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(); } } } \ No newline at end of file diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue index 3e734eae..c05b4214 100644 --- a/src/components/date-picker/picker.vue +++ b/src/components/date-picker/picker.vue @@ -194,9 +194,7 @@ return PLACEMENT_MAP[this.align]; }, selectionMode() { - if (this.type === 'week') { - return 'week'; - } else if (this.type === 'month') { + 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());