<template>
|
<table @click="handleMonthTableClick" @mousemove="handleMouseMove" class="el-month-table">
|
<tbody>
|
<tr v-for="(row, key) in rows" :key="key">
|
<td :class="getCellStyle(cell)" v-for="(cell, key) in row" :key="key">
|
<div>
|
<a class="cell">{{ t('el.datepicker.months.' + months[cell.text]) }}</a>
|
</div>
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
</template>
|
|
<script type="text/babel">
|
import Locale from 'element-ui/src/mixins/locale';
|
import { isDate, range, getDayCountOfMonth, nextDate } from 'element-ui/src/utils/date-util';
|
import { hasClass } from 'element-ui/src/utils/dom';
|
import { arrayFindIndex, coerceTruthyValueToArray, arrayFind } from 'element-ui/src/utils/util';
|
|
const datesInMonth = (year, month) => {
|
const numOfDays = getDayCountOfMonth(year, month);
|
const firstDay = new Date(year, month, 1);
|
return range(numOfDays).map(n => nextDate(firstDay, n));
|
};
|
|
const clearDate = (date) => {
|
return new Date(date.getFullYear(), date.getMonth());
|
};
|
|
const getMonthTimestamp = function(time) {
|
if (typeof time === 'number' || typeof time === 'string') {
|
return clearDate(new Date(time)).getTime();
|
} else if (time instanceof Date) {
|
return clearDate(time).getTime();
|
} else {
|
return NaN;
|
}
|
};
|
|
// remove the first element that satisfies `pred` from arr
|
// return a new array if modification occurs
|
// return the original array otherwise
|
const removeFromArray = function(arr, pred) {
|
const idx = typeof pred === 'function' ? arrayFindIndex(arr, pred) : arr.indexOf(pred);
|
return idx >= 0 ? [...arr.slice(0, idx), ...arr.slice(idx + 1)] : arr;
|
};
|
export default {
|
props: {
|
disabledDate: {},
|
value: {},
|
selectionMode: {
|
default: 'month'
|
},
|
minDate: {},
|
|
maxDate: {},
|
defaultValue: {
|
validator(val) {
|
// null or valid Date Object
|
return val === null || isDate(val) || (Array.isArray(val) && val.every(isDate));
|
}
|
},
|
date: {},
|
rangeState: {
|
default() {
|
return {
|
endDate: null,
|
selecting: false
|
};
|
}
|
}
|
},
|
|
mixins: [Locale],
|
|
watch: {
|
'rangeState.endDate'(newVal) {
|
this.markRange(this.minDate, newVal);
|
},
|
|
minDate(newVal, oldVal) {
|
if (getMonthTimestamp(newVal) !== getMonthTimestamp(oldVal)) {
|
this.markRange(this.minDate, this.maxDate);
|
}
|
},
|
|
maxDate(newVal, oldVal) {
|
if (getMonthTimestamp(newVal) !== getMonthTimestamp(oldVal)) {
|
this.markRange(this.minDate, this.maxDate);
|
}
|
}
|
},
|
|
data() {
|
return {
|
months: ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'],
|
tableRows: [ [], [], [] ],
|
lastRow: null,
|
lastColumn: null
|
};
|
},
|
|
methods: {
|
cellMatchesDate(cell, date) {
|
const value = new Date(date);
|
return this.date.getFullYear() === value.getFullYear() && Number(cell.text) === value.getMonth();
|
},
|
getCellStyle(cell) {
|
const style = {};
|
const year = this.date.getFullYear();
|
const today = new Date();
|
const month = cell.text;
|
const defaultValue = this.defaultValue ? Array.isArray(this.defaultValue) ? this.defaultValue : [this.defaultValue] : [];
|
style.disabled = typeof this.disabledDate === 'function'
|
? datesInMonth(year, month).every(this.disabledDate)
|
: false;
|
style.current = arrayFindIndex(coerceTruthyValueToArray(this.value), date => date.getFullYear() === year && date.getMonth() === month) >= 0;
|
style.today = today.getFullYear() === year && today.getMonth() === month;
|
style.default = defaultValue.some(date => this.cellMatchesDate(cell, date));
|
|
if (cell.inRange) {
|
style['in-range'] = true;
|
|
if (cell.start) {
|
style['start-date'] = true;
|
}
|
|
if (cell.end) {
|
style['end-date'] = true;
|
}
|
}
|
return style;
|
},
|
getMonthOfCell(month) {
|
const year = this.date.getFullYear();
|
return new Date(year, month, 1);
|
},
|
markRange(minDate, maxDate) {
|
minDate = getMonthTimestamp(minDate);
|
maxDate = getMonthTimestamp(maxDate) || minDate;
|
[minDate, maxDate] = [Math.min(minDate, maxDate), Math.max(minDate, maxDate)];
|
const rows = this.rows;
|
for (let i = 0, k = rows.length; i < k; i++) {
|
const row = rows[i];
|
for (let j = 0, l = row.length; j < l; j++) {
|
|
const cell = row[j];
|
const index = i * 4 + j;
|
const time = new Date(this.date.getFullYear(), index).getTime();
|
|
cell.inRange = minDate && time >= minDate && time <= maxDate;
|
cell.start = minDate && time === minDate;
|
cell.end = maxDate && time === maxDate;
|
}
|
}
|
},
|
handleMouseMove(event) {
|
if (!this.rangeState.selecting) return;
|
|
let target = event.target;
|
if (target.tagName === 'A') {
|
target = target.parentNode.parentNode;
|
}
|
if (target.tagName === 'DIV') {
|
target = target.parentNode;
|
}
|
if (target.tagName !== 'TD') return;
|
|
const row = target.parentNode.rowIndex;
|
const column = target.cellIndex;
|
// can not select disabled date
|
if (this.rows[row][column].disabled) return;
|
|
// only update rangeState when mouse moves to a new cell
|
// this avoids frequent Date object creation and improves performance
|
if (row !== this.lastRow || column !== this.lastColumn) {
|
this.lastRow = row;
|
this.lastColumn = column;
|
this.$emit('changerange', {
|
minDate: this.minDate,
|
maxDate: this.maxDate,
|
rangeState: {
|
selecting: true,
|
endDate: this.getMonthOfCell(row * 4 + column)
|
}
|
});
|
}
|
},
|
handleMonthTableClick(event) {
|
let target = event.target;
|
if (target.tagName === 'A') {
|
target = target.parentNode.parentNode;
|
}
|
if (target.tagName === 'DIV') {
|
target = target.parentNode;
|
}
|
if (target.tagName !== 'TD') return;
|
if (hasClass(target, 'disabled')) return;
|
const column = target.cellIndex;
|
const row = target.parentNode.rowIndex;
|
const month = row * 4 + column;
|
const newDate = this.getMonthOfCell(month);
|
if (this.selectionMode === 'range') {
|
if (!this.rangeState.selecting) {
|
this.$emit('pick', {minDate: newDate, maxDate: null});
|
this.rangeState.selecting = true;
|
} else {
|
if (newDate >= this.minDate) {
|
this.$emit('pick', {minDate: this.minDate, maxDate: newDate});
|
} else {
|
this.$emit('pick', {minDate: newDate, maxDate: this.minDate});
|
}
|
this.rangeState.selecting = false;
|
}
|
} else if (this.selectionMode === 'months') {
|
const value = this.value || [];
|
const year = this.date.getFullYear();
|
const newValue = arrayFindIndex(value, date => date.getFullYear() === year && date.getMonth() === month) >= 0
|
? removeFromArray(value, date => date.getTime() === newDate.getTime())
|
: [...value, newDate];
|
this.$emit('pick', newValue);
|
} else {
|
this.$emit('pick', month);
|
}
|
}
|
},
|
|
computed: {
|
rows() {
|
// TODO: refactory rows / getCellClasses
|
const rows = this.tableRows;
|
const disabledDate = this.disabledDate;
|
const selectedDate = [];
|
const now = getMonthTimestamp(new Date());
|
|
for (let i = 0; i < 3; i++) {
|
const row = rows[i];
|
for (let j = 0; j < 4; j++) {
|
let cell = row[j];
|
if (!cell) {
|
cell = { row: i, column: j, type: 'normal', inRange: false, start: false, end: false };
|
}
|
|
cell.type = 'normal';
|
|
const index = i * 4 + j;
|
const time = new Date(this.date.getFullYear(), index).getTime();
|
cell.inRange = time >= getMonthTimestamp(this.minDate) && time <= getMonthTimestamp(this.maxDate);
|
cell.start = this.minDate && time === getMonthTimestamp(this.minDate);
|
cell.end = this.maxDate && time === getMonthTimestamp(this.maxDate);
|
const isToday = time === now;
|
|
if (isToday) {
|
cell.type = 'today';
|
}
|
cell.text = index;
|
let cellDate = new Date(time);
|
cell.disabled = typeof disabledDate === 'function' && disabledDate(cellDate);
|
cell.selected = arrayFind(selectedDate, date => date.getTime() === cellDate.getTime());
|
|
this.$set(row, j, cell);
|
}
|
}
|
return rows;
|
}
|
}
|
};
|
</script>
|
