116 lines
No EOL
4 KiB
Vue
116 lines
No EOL
4 KiB
Vue
<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> |