456877a1
 梁灏
update TimePicker
|
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
|
<template>
<div :class="classes">
<div :class="[prefixCls + '-body']">
<div :class="[prefixCls + '-content', prefixCls + '-content-left']">
<div :class="[timePrefixCls + '-header']">开始时间</div>
<time-spinner
:show-seconds="showSeconds"
:hours="hours"
:minutes="minutes"
:seconds="seconds"
:disabled-hours="disabledHours"
:disabled-minutes="disabledMinutes"
:disabled-seconds="disabledSeconds"
:hide-disabled-options="hideDisabledOptions"
@on-change="handleStartChange"
@on-pick-click="handlePickClick"></time-spinner>
</div>
<div :class="[prefixCls + '-content', prefixCls + '-content-right']">
<div :class="[timePrefixCls + '-header']">结束时间</div>
<time-spinner
:show-seconds="showSeconds"
:hours="hoursEnd"
:minutes="minutesEnd"
:seconds="secondsEnd"
:disabled-hours="disabledHours"
:disabled-minutes="disabledMinutes"
:disabled-seconds="disabledSeconds"
:hide-disabled-options="hideDisabledOptions"
@on-change="handleEndChange"
@on-pick-click="handlePickClick"></time-spinner>
</div>
<Confirm
@on-pick-clear="handlePickClear"
@on-pick-success="handlePickSuccess"></Confirm>
</div>
</div>
</template>
<script>
import TimeSpinner from '../base/time-spinner.vue';
import Confirm from '../base/confirm.vue';
import Mixin from './mixin';
|
|
db9985a9
梁灏
update TimePicker
|
44
|
import { initTimeDate, toDate, formatDate } from '../util';
|
|
456877a1
梁灏
update TimePicker
|
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
|
const prefixCls = 'ivu-picker-panel';
const timePrefixCls = 'ivu-time-picker';
export default {
mixins: [Mixin],
components: { TimeSpinner, Confirm },
data () {
return {
prefixCls: prefixCls,
timePrefixCls: timePrefixCls,
format: 'HH:mm:ss',
date: initTimeDate(),
dateEnd: initTimeDate(),
value: '',
hours: '',
minutes: '',
seconds: '',
hoursEnd: '',
minutesEnd: '',
secondsEnd: '',
disabledHours: [],
disabledMinutes: [],
disabledSeconds: [],
hideDisabledOptions: false
|
|
3a435d65
梁灏
update TimePicker
|
70
|
};
|
|
456877a1
梁灏
update TimePicker
|
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
},
computed: {
classes () {
return [
`${prefixCls}-body-wrapper`,
`${timePrefixCls}-with-range`,
{
[`${timePrefixCls}-with-seconds`]: this.showSeconds
}
];
},
showSeconds () {
return (this.format || '').indexOf('ss') !== -1;
}
},
watch: {
value (newVal) {
|
|
0dd7b94a
梁灏
update TimePicker
|
88
89
|
if (!newVal) return;
if (Array.isArray(newVal)) {
|
|
456877a1
梁灏
update TimePicker
|
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
const valStart = newVal[0] ? toDate(newVal[0]) : false;
const valEnd = newVal[1] ? toDate(newVal[1]) : false;
if (valStart && valEnd) {
this.handleChange(
{
hours: valStart.getHours(),
minutes: valStart.getMinutes(),
seconds: valStart.getSeconds()
},
{
hours: valEnd.getHours(),
minutes: valEnd.getMinutes(),
seconds: valEnd.getSeconds()
},
false
|
|
3a435d65
梁灏
update TimePicker
|
106
|
);
|
|
456877a1
梁灏
update TimePicker
|
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
}
}
}
},
methods: {
handleClear() {
this.date = initTimeDate();
this.dateEnd = initTimeDate();
this.hours = '';
this.minutes = '';
this.seconds = '';
this.hoursEnd = '';
this.minutesEnd = '';
this.secondsEnd = '';
},
handleChange (date, dateEnd, emit = true) {
|
|
db9985a9
梁灏
update TimePicker
|
123
124
|
const oldDateEnd = new Date(this.dateEnd);
|
|
456877a1
梁灏
update TimePicker
|
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
if (date.hours !== undefined) {
this.date.setHours(date.hours);
this.hours = this.date.getHours();
}
if (date.minutes !== undefined) {
this.date.setMinutes(date.minutes);
this.minutes = this.date.getMinutes();
}
if (date.seconds !== undefined) {
this.date.setSeconds(date.seconds);
this.seconds = this.date.getSeconds();
}
if (dateEnd.hours !== undefined) {
this.dateEnd.setHours(dateEnd.hours);
this.hoursEnd = this.dateEnd.getHours();
}
if (dateEnd.minutes !== undefined) {
this.dateEnd.setMinutes(dateEnd.minutes);
this.minutesEnd = this.dateEnd.getMinutes();
}
if (dateEnd.seconds !== undefined) {
this.dateEnd.setSeconds(dateEnd.seconds);
this.secondsEnd = this.dateEnd.getSeconds();
}
|
|
964582b3
梁灏
update TimePicker
|
149
150
151
152
153
154
155
|
// judge endTime > startTime?
if (this.dateEnd < this.date) {
this.$nextTick(() => {
this.dateEnd = new Date(this.date);
this.hoursEnd = this.dateEnd.getHours();
this.minutesEnd = this.dateEnd.getMinutes();
this.secondsEnd = this.dateEnd.getSeconds();
|
|
db9985a9
梁灏
update TimePicker
|
156
157
158
159
160
|
const format = 'yyyy-MM-dd HH:mm:ss';
if (formatDate(oldDateEnd, format) !== formatDate(this.dateEnd, format)) {
if (emit) this.$emit('on-pick', [this.date, this.dateEnd], true);
}
|
|
964582b3
梁灏
update TimePicker
|
161
162
163
164
|
});
} else {
if (emit) this.$emit('on-pick', [this.date, this.dateEnd], true);
}
|
|
456877a1
梁灏
update TimePicker
|
165
166
167
168
169
170
171
172
173
174
|
},
handleStartChange (date) {
this.handleChange(date, {});
},
handleEndChange (date) {
this.handleChange({}, date);
}
}
};
</script>
|
