52 lines
1.1 KiB
Vue
52 lines
1.1 KiB
Vue
<template>
|
|
<b-input v-bind="$attrs" type="time" v-model="timeCode" pattern="[0-9]{2}:[0-9]{2}" placeholder="13:45"></b-input>
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
import {computed} from "vue";
|
|
import _ from 'lodash';
|
|
|
|
const props = defineProps({
|
|
modelValue: String
|
|
});
|
|
|
|
const emit = defineEmits(['update:modelValue']);
|
|
|
|
const parseTimeCode = (timeCode) => {
|
|
if (timeCode !== '' && timeCode !== null) {
|
|
timeCode = _.padStart(timeCode, 4, '0');
|
|
return timeCode.substring(0, 2) + ':' + timeCode.substring(2);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
const convertToTimeCode = (time) => {
|
|
if (_.isEmpty(time)) {
|
|
return null;
|
|
}
|
|
|
|
let timeParts = time.split(':');
|
|
return (100 * parseInt(timeParts[0], 10)) + parseInt(timeParts[1], 10);
|
|
}
|
|
|
|
const timeCode = computed({
|
|
get: () => {
|
|
return parseTimeCode(props.modelValue);
|
|
},
|
|
set: (newValue) => {
|
|
emit('update:modelValue', convertToTimeCode(newValue));
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
export default {
|
|
model: {
|
|
prop: 'modelValue',
|
|
event: 'update:modelValue'
|
|
},
|
|
};
|
|
</script>
|