time.vue
4.04 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
<template>
<div :class="[prefixCls + '-body-wrapper']">
<div :class="[prefixCls + '-body']">
<div :class="[timePrefixCls + '-header']" v-if="showDate">{{ visibleDate }}</div>
<div :class="[prefixCls + '-content']">
<time-spinner
ref="timeSpinner"
:show-seconds="showSeconds"
:hours="hours"
:minutes="minutes"
:seconds="seconds"
:disabled-hours="disabledHours"
:disabled-minutes="disabledMinutes"
:disabled-seconds="disabledSeconds"
:hide-disabled-options="hideDisabledOptions"
@on-change="handleChange"
@on-pick-click="handlePickClick"></time-spinner>
</div>
<Confirm
v-if="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';
import Locale from '../../../mixins/locale';
import { initTimeDate } from '../util';
const prefixCls = 'ivu-picker-panel';
const timePrefixCls = 'ivu-time-picker';
export default {
name: 'TimePicker',
mixins: [ Mixin, Locale ],
components: { TimeSpinner, Confirm },
data () {
return {
prefixCls: prefixCls,
timePrefixCls: timePrefixCls,
date: initTimeDate(),
value: '',
showDate: false,
format: 'HH:mm:ss',
hours: '',
minutes: '',
seconds: '',
disabledHours: [],
disabledMinutes: [],
disabledSeconds: [],
hideDisabledOptions: false,
confirm: false
};
},
computed: {
showSeconds () {
return (this.format || '').indexOf('ss') !== -1;
},
visibleDate () {
const date = this.date;
const month = date.getMonth() + 1;
const tYear = this.t('i.datepicker.year');
const tMonth = this.t(`i.datepicker.month${month}`);
return `${date.getFullYear()}${tYear} ${tMonth}`;
}
},
watch: {
value (newVal) {
if (!newVal) return;
newVal = new Date(newVal);
if (!isNaN(newVal)) {
this.date = newVal;
this.handleChange({
hours: newVal.getHours(),
minutes: newVal.getMinutes(),
seconds: newVal.getSeconds()
}, false);
}
}
},
methods: {
handleClear() {
this.date = initTimeDate();
this.hours = '';
this.minutes = '';
this.seconds = '';
},
handleChange (date, emit = true) {
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 (emit) this.$emit('on-pick', this.date, true);
},
updateScroll () {
this.$refs.timeSpinner.updateScroll();
}
},
mounted () {
if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true;
}
};
</script>