date-table.vue
4.48 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
<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, i) in readCells"
:key="String(cell.date) + i"
@click="handleClick(cell)"
@mouseenter="handleMouseMove(cell)"
>
<em>{{ cell.desc }}</em>
</span>
</div>
</template>
<script>
import { clearHours, isInRange } from '../util';
import Locale from '../../../mixins/locale';
import jsCalendar from 'js-calendar';
import mixin from './mixin';
import prefixCls from './prefixCls';
export default {
mixins: [ Locale, mixin ],
props: {
/* more props in mixin */
showWeekNumbers: {
type: Boolean,
default: false
},
},
data () {
const weekStartDay = Number(this.t('i.datepicker.weekStartDay'));
return {
prefixCls: prefixCls,
calendar: new jsCalendar.Generator({onlyDays: !this.showWeekNumbers, weekStart: weekStartDay})
};
},
computed: {
classes () {
return [
`${prefixCls}`,
{
[`${prefixCls}-show-week-numbers`]: this.showWeekNumbers
}
];
},
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 this.showWeekNumbers ? [''].concat(weekDays) : weekDays;
},
readCells () {
const tableYear = this.tableDate.getFullYear();
const tableMonth = this.tableDate.getMonth();
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 isRange = this.selectionMode === 'range';
const disabledTestFn = typeof this.disabledDate === 'function' && this.disabledDate;
return this.calendar(tableYear, tableMonth, (cell) => {
const time = cell.date && clearHours(cell.date);
const dateIsInCurrentMonth = cell.date && tableMonth === cell.date.getMonth();
return {
...cell,
type: time === today ? 'today' : cell.type,
selected: dateIsInCurrentMonth && selectedDays.includes(time),
disabled: (cell.date && disabledTestFn) && disabledTestFn(new Date(time)),
range: dateIsInCurrentMonth && isRange && isInRange(time, rangeStart, rangeEnd),
start: dateIsInCurrentMonth && isRange && time === minDay,
end: dateIsInCurrentMonth && isRange && time === maxDay
};
}).cells.slice(this.showWeekNumbers ? 8 : 0);
}
},
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 === 'prevMonth',
[`${prefixCls}-cell-next-month`]: cell.type === 'nextMonth',
[`${prefixCls}-cell-week-label`]: cell.type === 'weekLabel',
[`${prefixCls}-cell-range`]: cell.range && !cell.start && !cell.end
}
];
},
}
};
</script>