time.vue
3.42 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
<template>
<div :class="[prefixCls + '-body-wrapper']" @mousedown.prevent>
<div :class="[prefixCls + '-body']">
<div :class="[timePrefixCls + '-header']" v-if="showDate">{{ visibleDate }}</div>
<div :class="[prefixCls + '-content']">
<time-spinner
ref="timeSpinner"
:show-seconds="showSeconds"
:steps="steps"
:hours="date.getHours()"
:minutes="date.getMinutes()"
:seconds="date.getSeconds()"
: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 Options from '../../time-mixins';
import Mixin from '../panel-mixin';
import Locale from '../../../../mixins/locale';
import { initTimeDate } from '../../util';
const prefixCls = 'ivu-picker-panel';
const timePrefixCls = 'ivu-time-picker';
const capitalize = (str) => str[0].toUpperCase() + str.slice(1);
export default {
name: 'TimePickerPanel',
mixins: [ Mixin, Locale, Options ],
components: { TimeSpinner, Confirm },
props: {
steps: {
type: Array,
default: () => []
},
format: {
type: String,
default: 'HH:mm:ss'
},
value: {
type: Array,
required: true
},
},
data () {
return {
prefixCls: prefixCls,
timePrefixCls: timePrefixCls,
date: this.value[0] || initTimeDate(),
showDate: false,
confirm: false
};
},
computed: {
showSeconds () {
return !(this.format || '').match(/mm$/);
},
visibleDate () { // TODO
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 (dates) {
let newVal = dates[0] || initTimeDate();
newVal = new Date(newVal);
this.date = newVal;
}
},
methods: {
handleChange (date, emit = true) {
const newDate = new Date(this.date);
Object.keys(date).forEach(
type => newDate[`set${capitalize(type)}`](date[type])
);
if (emit) this.$emit('on-pick', newDate, true);
},
},
mounted () {
if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true;
}
};
</script>