43 lines
1.4 KiB
Vue
43 lines
1.4 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
import { date } from 'quasar';
|
|
|
|
const { title, startDate = "", endDate = "" } = defineProps<{
|
|
title: string;
|
|
startDate?: string;
|
|
endDate?: string;
|
|
}>();
|
|
|
|
const date_format_options = { day: 'numeric', month: 'long', year: 'numeric', };
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="column q-mt-lg text-uppercase text-center text-weight-bolder text-h4">
|
|
<span class="col">{{ $t(title) }}</span>
|
|
|
|
<transition
|
|
enter-active-class="animated fadeInDown"
|
|
leave-active-class="animated fadeOutDown"
|
|
mode="out-in"
|
|
>
|
|
<div
|
|
:key="startDate"
|
|
v-if="startDate.length > 0"
|
|
class="col row flex-center full-width q-py-none q-my-none"
|
|
>
|
|
<div class="text-accent text-weight-bold text-h6">
|
|
{{ $d(date.extractDate(startDate, 'YYYY-MM-DD'), date_format_options) }}
|
|
</div>
|
|
<div class="text-body2 q-mx-md text-weight-medium">
|
|
{{ $t('shared.misc.to') }}
|
|
</div>
|
|
<div class="text-accent text-weight-bold text-h6">
|
|
{{ $d(date.extractDate(endDate, 'YYYY-MM-DD'), date_format_options) }}
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</template> |