drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update DatePicker

Browse source 
update DatePicker
This commit is contained in:
梁灏 2016-12-19 16:21:54 +08:00
parent 3cf7cfd1de
commit 472b4ff150
5 changed files with 120 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

123
src/components/date-picker/base/date-table.vue
View file

@ -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 [

34
src/components/date-picker/panel/date-range.vue
View file

@ -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;
}
}
}

12
src/components/date-picker/panel/date.vue
View file

@ -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 () {

12
src/components/date-picker/panel/mixin.js
View file

@ -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();
}
}
}

6
src/components/date-picker/picker.vue
View file

@ -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());