2a09d1a4
 liuqimichale
添加宜春 天水 宣化
|
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
|
<template>
<table @click="handleMonthTableClick" class="el-month-table">
<tbody>
<tr>
<td :class="getCellStyle(0)">
<a class="cell">{{ t('el.datepicker.months.jan') }}</a>
</td>
<td :class="getCellStyle(1)">
<a class="cell">{{ t('el.datepicker.months.feb') }}</a>
</td>
<td :class="getCellStyle(2)">
<a class="cell">{{ t('el.datepicker.months.mar') }}</a>
</td>
<td :class="getCellStyle(3)">
<a class="cell">{{ t('el.datepicker.months.apr') }}</a>
</td>
</tr>
<tr>
<td :class="getCellStyle(4)">
<a class="cell">{{ t('el.datepicker.months.may') }}</a>
</td>
<td :class="getCellStyle(5)">
<a class="cell">{{ t('el.datepicker.months.jun') }}</a>
</td>
<td :class="getCellStyle(6)">
<a class="cell">{{ t('el.datepicker.months.jul') }}</a>
</td>
<td :class="getCellStyle(7)">
<a class="cell">{{ t('el.datepicker.months.aug') }}</a>
</td>
</tr>
<tr>
<td :class="getCellStyle(8)">
<a class="cell">{{ t('el.datepicker.months.sep') }}</a>
</td>
<td :class="getCellStyle(9)">
<a class="cell">{{ t('el.datepicker.months.oct') }}</a>
</td>
<td :class="getCellStyle(10)">
<a class="cell">{{ t('el.datepicker.months.nov') }}</a>
</td>
<td :class="getCellStyle(11)">
<a class="cell">{{ t('el.datepicker.months.dec') }}</a>
</td>
</tr>
</tbody>
</table>
</template>
<script type="text/babel">
import Locale from 'element-ui/src/mixins/locale';
import { isDate, range, getDayCountOfMonth, nextDate } from '../util';
import { hasClass } from 'element-ui/src/utils/dom';
import { arrayFindIndex, coerceTruthyValueToArray } 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));
};
export default {
props: {
disabledDate: {},
value: {},
defaultValue: {
validator(val) {
// null or valid Date Object
return val === null || (val instanceof Date && isDate(val));
}
},
date: {}
},
mixins: [Locale],
methods: {
getCellStyle(month) {
const style = {};
const year = this.date.getFullYear();
const today = new Date();
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 = this.defaultValue &&
this.defaultValue.getFullYear() === year &&
this.defaultValue.getMonth() === month;
return style;
},
handleMonthTableClick(event) {
const target = event.target;
if (target.tagName !== 'A') return;
if (hasClass(target.parentNode, 'disabled')) return;
const column = target.parentNode.cellIndex;
const row = target.parentNode.parentNode.rowIndex;
const month = row * 4 + column;
this.$emit('pick', month);
}
}
};
</script>
|
