80 lines
2.2 KiB
Vue
80 lines
2.2 KiB
Vue
<script setup>
|
|
import { computed, useAttrs } from 'vue';
|
|
import { date } from 'quasar';
|
|
import VnDate from './VnDate.vue';
|
|
import VnTime from './VnTime.vue';
|
|
|
|
const $attrs = useAttrs();
|
|
const model = defineModel({ type: [Date] });
|
|
|
|
const $props = defineProps({
|
|
isOutlined: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
showEvent: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
});
|
|
const styleAttrs = computed(() => {
|
|
return $props.isOutlined
|
|
? {
|
|
dense: true,
|
|
outlined: true,
|
|
rounded: true,
|
|
}
|
|
: {};
|
|
});
|
|
const mask = 'DD-MM-YYYY HH:mm';
|
|
const selectedDate = computed({
|
|
get() {
|
|
if (!model.value) return new Date(model.value);
|
|
return date.formatDate(new Date(model.value), mask);
|
|
},
|
|
set(value) {
|
|
model.value = Date.convertToISODateTime(value);
|
|
},
|
|
});
|
|
const manageDate = (date) => {
|
|
selectedDate.value = date;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div @mouseover="hover = true" @mouseleave="hover = false">
|
|
<QInput
|
|
ref="vnInputDateRef"
|
|
v-model="selectedDate"
|
|
class="vn-input-date"
|
|
placeholder="dd/mm/aaaa HH:mm"
|
|
v-bind="{ ...$attrs, ...styleAttrs }"
|
|
:clearable="false"
|
|
@click="isPopupOpen = !isPopupOpen"
|
|
@keydown="isPopupOpen = false"
|
|
hide-bottom-space
|
|
@update:model-value="manageDate"
|
|
:data-cy="$attrs.dataCy ?? $attrs.label + '_inputDateTime'"
|
|
>
|
|
<template #prepend>
|
|
<QIcon name="today" size="xs">
|
|
<QPopupProxy cover transition-show="scale" transition-hide="scale">
|
|
<VnDate :mask="mask" v-model="selectedDate" />
|
|
</QPopupProxy>
|
|
</QIcon>
|
|
</template>
|
|
<template #append>
|
|
<QIcon name="access_time" size="xs">
|
|
<QPopupProxy cover transition-show="scale" transition-hide="scale">
|
|
<VnTime format24h :mask="mask" v-model="selectedDate" />
|
|
</QPopupProxy>
|
|
</QIcon>
|
|
</template>
|
|
</QInput>
|
|
</div>
|
|
</template>
|
|
<i18n>
|
|
es:
|
|
Open date: Abrir fecha
|
|
</i18n>
|