17e1fcf1
 梁灏
init DatePicker
|
1
|
<template>
|
|
50637863
梁灏
update DatePicker
|
2
|
<div
|
|
0f677893
梁灏
update DatePicker
|
3
4
5
|
:class="classes"
@click="handleClick"
@mousemove="handleMouseMove">
|
|
50637863
梁灏
update DatePicker
|
6
7
8
|
<div :class="[prefixCls + '-header']">
<span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span>
</div>
|
|
c46f385a
梁灏
update DatePicker
|
9
|
<span :class="getCellCls(cell)" v-for="cell in cells"><em :index="$index">{{ cell.text }}</em></span>
|
|
50637863
梁灏
update DatePicker
|
10
|
</div>
|
|
17e1fcf1
梁灏
init DatePicker
|
11
12
|
</template>
<script>
|
|
50637863
梁灏
update DatePicker
|
13
14
15
16
17
18
19
20
21
22
|
import { getFirstDayOfMonth, getDayCountOfMonth, getStartDateOfMonth } from '../util';
import { deepCopy } from '../../../utils/assist';
const prefixCls = 'ivu-date-picker-cells';
const clearHours = function (time) {
const cloneDate = new Date(time);
cloneDate.setHours(0, 0, 0, 0);
return cloneDate.getTime();
};
|
|
0f677893
梁灏
update DatePicker
|
23
|
|
|
17e1fcf1
梁灏
init DatePicker
|
24
|
export default {
|
|
0f677893
梁灏
update DatePicker
|
25
26
27
28
|
props: {
date: {},
year: {},
month: {},
|
|
0f677893
梁灏
update DatePicker
|
29
30
31
|
selectionMode: {
default: 'day'
},
|
|
0f677893
梁灏
update DatePicker
|
32
33
34
35
36
37
38
39
40
41
42
43
44
|
disabledDate: {},
minDate: {},
maxDate: {},
rangeState: {
default () {
return {
endDate: null,
selecting: false,
row: null,
column: null
};
}
},
|
|
50637863
梁灏
update DatePicker
|
45
|
value: ''
|
|
0f677893
梁灏
update DatePicker
|
46
|
},
|
|
17e1fcf1
梁灏
init DatePicker
|
47
|
data () {
|
|
0f677893
梁灏
update DatePicker
|
48
49
50
51
52
53
54
|
return {
prefixCls: prefixCls
}
},
computed: {
classes () {
return [
|
|
50637863
梁灏
update DatePicker
|
55
|
`${prefixCls}`
|
|
0f677893
梁灏
update DatePicker
|
56
|
]
|
|
50637863
梁灏
update DatePicker
|
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
|
},
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
day = (day === 0 ? 7 : day);
const today = clearHours(new Date()); // timestamp of today
const selectDay = clearHours(new Date(this.value)); // timestamp of selected day
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: '',
selected: false,
disabled: 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;
let prevMonth = this.month - 1;
let prevYear = this.year;
if (this.month === 0) {
prevMonth = 11;
prevYear -= 1;
}
const time = clearHours(new Date(prevYear, prevMonth, cell.text));
cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
cells.push(cell);
}
}
for (let i = 1; i <= dateCountOfMonth; i++) {
const cell = deepCopy(cell_tmpl);
const time = clearHours(new Date(this.year, this.month, i));
cell.type = time === today ? 'today' : 'normal';
cell.text = i;
cell.selected = time === selectDay;
cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
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;
let nextMonth = this.month + 1;
let nextYear = this.year;
if (this.month === 11) {
nextMonth = 0;
nextYear += 1;
}
const time = clearHours(new Date(nextYear, nextMonth, cell.text));
cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
cells.push(cell);
}
return cells;
|
|
0f677893
梁灏
update DatePicker
|
126
|
}
|
|
17e1fcf1
梁灏
init DatePicker
|
127
|
},
|
|
0f677893
梁灏
update DatePicker
|
128
|
methods: {
|
|
c46f385a
梁灏
update DatePicker
|
129
130
131
132
133
|
handleClick (event) {
const target = event.target;
if (target.tagName === 'EM') {
const cell = this.cells[parseInt(event.target.getAttribute('index'))];
if (cell.disabled) return;
|
|
0f677893
梁灏
update DatePicker
|
134
|
|
|
c46f385a
梁灏
update DatePicker
|
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
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);
if (this.selectionMode === 'range') {
// todo
} else {
this.$emit('on-pick', newDate);
}
}
|
|
0f677893
梁灏
update DatePicker
|
163
164
165
166
|
},
handleMouseMove () {
},
|
|
0f677893
梁灏
update DatePicker
|
167
168
169
170
|
getCellCls (cell) {
return [
`${prefixCls}-cell`,
{
|
|
50637863
梁灏
update DatePicker
|
171
172
173
174
175
|
[`${prefixCls}-cell-selected`]: cell.selected,
[`${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'
|
|
0f677893
梁灏
update DatePicker
|
176
177
|
}
]
|
|
50637863
梁灏
update DatePicker
|
178
179
|
},
|
|
0f677893
梁灏
update DatePicker
|
180
|
}
|
|
17e1fcf1
梁灏
init DatePicker
|
181
182
|
}
</script>
|
