127 lines
3.3 KiB
Vue
127 lines
3.3 KiB
Vue
<script setup>
|
|
import { computed, ref } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import isValidDate from 'filters/isValidDate';
|
|
import VnInput from 'components/common/VnInput.vue';
|
|
|
|
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(props.modelValue);
|
|
date.setHours(Number.parseInt(hours) || 0, Number.parseInt(minutes) || 0, 0, 0);
|
|
emit('update:modelValue', value ? date.toISOString() : null);
|
|
},
|
|
});
|
|
|
|
const isPopupOpen = ref(false);
|
|
const onDateUpdate = (date) => {
|
|
internalValue.value = date;
|
|
};
|
|
|
|
const save = () => {
|
|
value.value = internalValue.value;
|
|
};
|
|
const formatTime = (dateString) => {
|
|
if (!dateString || !isValidDate(dateString)) {
|
|
return '';
|
|
}
|
|
|
|
const date = new Date(dateString || '');
|
|
return date.toLocaleTimeString([], {
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
});
|
|
};
|
|
|
|
const internalValue = ref(formatTime(value));
|
|
|
|
const styleAttrs = computed(() => {
|
|
return props.isOutlined
|
|
? {
|
|
dense: true,
|
|
outlined: true,
|
|
rounded: true,
|
|
}
|
|
: {};
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<QInput
|
|
class="vn-input-time"
|
|
readonly
|
|
:model-value="formatTime(value)"
|
|
v-bind="{ ...$attrs, ...styleAttrs }"
|
|
@click="isPopupOpen = true"
|
|
>
|
|
<template #append>
|
|
<QIcon name="Schedule" class="cursor-pointer">
|
|
<QPopupProxy
|
|
v-model="isPopupOpen"
|
|
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>
|