109 lines
2.8 KiB
Vue
109 lines
2.8 KiB
Vue
<script setup>
|
|
import {computed, ref} from 'vue';
|
|
import { toHour} from 'src/filters';
|
|
import {useI18n} from "vue-i18n";
|
|
import isValidDate from "filters/isValidDate";
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
readonly: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
isOutlined: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
const { t } = useI18n();
|
|
const emit = defineEmits(['update:modelValue']);
|
|
const value = computed({
|
|
get() {
|
|
return props.modelValue;
|
|
},
|
|
set(value) {
|
|
const [hours, minutes] = value.split(':')
|
|
const date = new Date()
|
|
date.setUTCHours(Number.parseInt(hours) || 0, Number.parseInt(minutes) || 0, 0, 0)
|
|
emit('update:modelValue', value ? date.toISOString() : null);
|
|
},
|
|
});
|
|
|
|
const onDateUpdate = (date) => {
|
|
internalValue.value = date;
|
|
};
|
|
|
|
const save = () => {
|
|
value.value = internalValue.value;
|
|
};
|
|
const formatTime = (dateString) => {
|
|
if (!isValidDate(dateString)){
|
|
return ''
|
|
}
|
|
const date = new Date(dateString || '');
|
|
return `${date.getUTCHours().toString().padStart(2, '0')}:${date.getUTCMinutes().toString().padStart(2, '0')}`;
|
|
};
|
|
|
|
const internalValue = ref(formatTime(value))
|
|
|
|
const styleAttrs = computed(() => {
|
|
return props.isOutlined
|
|
? {
|
|
dense: true,
|
|
outlined: true,
|
|
rounded: true,
|
|
}
|
|
: {};
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<QInput
|
|
class="vn-input-time"
|
|
rounded
|
|
readonly
|
|
:model-value="toHour(value)"
|
|
v-bind="{ ...$attrs, ...styleAttrs }"
|
|
>
|
|
<template #append>
|
|
<QIcon name="event" class="cursor-pointer">
|
|
<QPopupProxy
|
|
cover
|
|
transition-show="scale"
|
|
transition-hide="scale"
|
|
:no-parent-event="props.readonly"
|
|
>
|
|
<QTime
|
|
:format24h="false"
|
|
:model-value="formatTime(value)"
|
|
@update:model-value="onDateUpdate"
|
|
>
|
|
<div class="row items-center justify-end q-gutter-sm">
|
|
<QBtn :label="t('Cancel')" color="primary" flat v-close-popup />
|
|
<QBtn label="Ok" color="primary" flat @click="save" v-close-popup />
|
|
</div>
|
|
</QTime>
|
|
</QPopupProxy>
|
|
</QIcon>
|
|
</template>
|
|
</QInput>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.vn-input-time.q-field--standard.q-field--readonly .q-field__control:before {
|
|
border-bottom-style: solid;
|
|
}
|
|
|
|
.vn-input-time.q-field--outlined.q-field--readonly .q-field__control:before {
|
|
border-style: solid;
|
|
}
|
|
</style>
|
|
|
|
<i18n>
|
|
es:
|
|
Cancel: Cancelar
|
|
</i18n>
|