date-table.vue
5.73 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<template>
<div :class="classes">
<div :class="[prefixCls + '-header']">
<span v-for="day in headerDays" :key="day">
{{day}}
</span>
</div>
<span
:class="getCellCls(cell)"
v-for="cell in readCells"
@click="handleClick(cell)"
@mouseenter="handleMouseMove(cell)"
>
<em>{{ cell.text }}</em>
</span>
</div>
</template>
<script>
import { getFirstDayOfMonth, getDayCountOfMonth, clearHours, isInRange } from '../util';
import { deepCopy } from '../../../utils/assist';
import Locale from '../../../mixins/locale';
import mixin from './mixin';
import prefixCls from './prefixCls';
export default {
mixins: [ Locale, mixin ],
props: {
/* more props in mixin */
},
data () {
return {
prefixCls: prefixCls,
};
},
computed: {
classes () {
return [
`${prefixCls}`
];
},
headerDays () {
const weekStartDay = Number(this.t('i.datepicker.weekStartDay'));
const translatedDays = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'].map(item => {
return this.t('i.datepicker.weeks.' + item);
});
const weekDays = translatedDays.splice(weekStartDay, 7 - weekStartDay).concat(translatedDays.splice(0, weekStartDay));
return weekDays;
},
readCells () {
const tableYear = this.tableDate.getFullYear();
const tableMonth = this.tableDate.getMonth();
const date = new Date(tableYear, tableMonth, 1);
const weekStartDay = Number(this.t('i.datepicker.weekStartDay'));
const day = (getFirstDayOfMonth(date) || 7) - weekStartDay; // day of first day
const today = clearHours(new Date()); // timestamp of today
const selectedDays = this.dates.filter(Boolean).map(clearHours); // timestamp of selected days
const [minDay, maxDay] = this.dates.map(clearHours);
const rangeStart = this.rangeState.from && clearHours(this.rangeState.from);
const rangeEnd = this.rangeState.to && clearHours(this.rangeState.to);
const dateCountOfMonth = getDayCountOfMonth(date.getFullYear(), date.getMonth());
const dateCountOfLastMonth = getDayCountOfMonth(date.getFullYear(), (date.getMonth() === 0 ? 11 : date.getMonth() - 1));
const disabledDate = this.disabledDate;
let cells = [];
const cell_tmpl = {
text: '',
type: '',
date: null,
selected: false,
disabled: false,
range: false,
start: false,
end: false
};
if (day !== 7) {
for (let i = 0; i < day; i++) {
const cell = deepCopy(cell_tmpl);
cell.type = 'prev-month';
cell.text = dateCountOfLastMonth - (day - 1) + i;
cell.date = new Date(tableYear, tableMonth - 1, cell.text);
const time = clearHours(cell.date);
cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
cells.push(cell);
}
}
for (let i = 1; i <= dateCountOfMonth; i++) {
const cell = deepCopy(cell_tmpl);
cell.text = i;
cell.date = new Date(tableYear, tableMonth, cell.text);
const time = clearHours(cell.date);
cell.type = time === today ? 'today' : 'normal';
cell.selected = selectedDays.includes(time);
cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
if (this.selectionMode === 'range'){
cell.range = isInRange(time, rangeStart, rangeEnd);
cell.start = time === minDay;
cell.end = time === maxDay;
}
cells.push(cell);
}
const nextMonthCount = 42 - cells.length;
for (let i = 1; i <= nextMonthCount; i++) {
const cell = deepCopy(cell_tmpl);
cell.type = 'next-month';
cell.text = i;
cell.date = new Date(tableYear, tableMonth + 1, cell.text);
const time = clearHours(cell.date);
cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
cells.push(cell);
}
return cells;
}
},
methods: {
getCellCls (cell) {
return [
`${prefixCls}-cell`,
{
[`${prefixCls}-cell-selected`]: cell.selected || cell.start || cell.end,
[`${prefixCls}-cell-disabled`]: cell.disabled,
[`${prefixCls}-cell-today`]: cell.type === 'today',
[`${prefixCls}-cell-prev-month`]: cell.type === 'prev-month',
[`${prefixCls}-cell-next-month`]: cell.type === 'next-month',
[`${prefixCls}-cell-range`]: cell.range && !cell.start && !cell.end
}
];
},
}
};
</script>