149 lines
4.2 KiB
Vue
149 lines
4.2 KiB
Vue
<script setup>
|
|
import { onMounted, watch, computed, ref, useAttrs } from 'vue';
|
|
import { date } from 'quasar';
|
|
import VnDate from './VnDate.vue';
|
|
import { useRequired } from 'src/composables/useRequired';
|
|
|
|
const $attrs = useAttrs();
|
|
const { isRequired, requiredFieldRule } = useRequired($attrs);
|
|
const model = defineModel({ type: [String, Date] });
|
|
|
|
const $props = defineProps({
|
|
isOutlined: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
showEvent: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
});
|
|
|
|
const vnInputDateRef = ref(null);
|
|
|
|
const dateFormat = 'DD/MM/YYYY';
|
|
const isPopupOpen = ref();
|
|
const hover = ref();
|
|
const mask = ref();
|
|
|
|
const mixinRules = [requiredFieldRule, ...($attrs.rules ?? [])];
|
|
|
|
const formattedDate = computed({
|
|
get() {
|
|
if (!model.value) return model.value;
|
|
return date.formatDate(new Date(model.value), dateFormat);
|
|
},
|
|
set(value) {
|
|
if (value == model.value) return;
|
|
let newDate;
|
|
if (value) {
|
|
// parse input
|
|
if (value.includes('/') && value.length >= 10) {
|
|
if (value.at(2) == '/') value = value.split('/').reverse().join('/');
|
|
value = date.formatDate(
|
|
new Date(value).toISOString(),
|
|
'YYYY-MM-DDTHH:mm:ss.SSSZ'
|
|
);
|
|
}
|
|
const [year, month, day] = value.split('-').map((e) => parseInt(e));
|
|
newDate = new Date(year, month - 1, day);
|
|
if (model.value) {
|
|
const orgDate =
|
|
model.value instanceof Date ? model.value : new Date(model.value);
|
|
|
|
newDate.setHours(
|
|
orgDate.getHours(),
|
|
orgDate.getMinutes(),
|
|
orgDate.getSeconds(),
|
|
orgDate.getMilliseconds()
|
|
);
|
|
}
|
|
}
|
|
if (!isNaN(newDate)) model.value = newDate.toISOString();
|
|
},
|
|
});
|
|
|
|
const popupDate = computed(() =>
|
|
model.value ? date.formatDate(new Date(model.value), 'YYYY/MM/DD') : model.value
|
|
);
|
|
onMounted(() => {
|
|
// fix quasar bug
|
|
mask.value = '##/##/####';
|
|
});
|
|
watch(
|
|
() => model.value,
|
|
(val) => (formattedDate.value = val),
|
|
{ immediate: true }
|
|
);
|
|
|
|
const styleAttrs = computed(() => {
|
|
return $props.isOutlined
|
|
? {
|
|
dense: true,
|
|
outlined: true,
|
|
rounded: true,
|
|
}
|
|
: {};
|
|
});
|
|
|
|
const manageDate = (date) => {
|
|
formattedDate.value = date;
|
|
isPopupOpen.value = false;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div @mouseover="hover = true" @mouseleave="hover = false">
|
|
<QInput
|
|
ref="vnInputDateRef"
|
|
v-model="formattedDate"
|
|
class="vn-input-date"
|
|
:mask="mask"
|
|
placeholder="dd/mm/aaaa"
|
|
v-bind="{ ...$attrs, ...styleAttrs }"
|
|
:class="{ required: isRequired }"
|
|
:rules="mixinRules"
|
|
:clearable="false"
|
|
@click="isPopupOpen = !isPopupOpen"
|
|
hide-bottom-space
|
|
>
|
|
<template #append>
|
|
<QIcon
|
|
name="close"
|
|
size="xs"
|
|
v-if="
|
|
($attrs.clearable == undefined || $attrs.clearable) &&
|
|
hover &&
|
|
model &&
|
|
!$attrs.disable
|
|
"
|
|
@click="
|
|
vnInputDateRef.focus();
|
|
model = null;
|
|
isPopupOpen = false;
|
|
"
|
|
/>
|
|
</template>
|
|
<QMenu
|
|
v-if="$q.screen.gt.xs"
|
|
transition-show="scale"
|
|
transition-hide="scale"
|
|
v-model="isPopupOpen"
|
|
anchor="bottom left"
|
|
self="top start"
|
|
:no-focus="true"
|
|
:no-parent-event="true"
|
|
>
|
|
<VnDate v-model="popupDate" @update:model-value="manageDate" />
|
|
</QMenu>
|
|
<QDialog v-else v-model="isPopupOpen">
|
|
<VnDate v-model="popupDate" @update:model-value="manageDate" />
|
|
</QDialog>
|
|
</QInput>
|
|
</div>
|
|
</template>
|
|
<i18n>
|
|
es:
|
|
Open date: Abrir fecha
|
|
</i18n>
|