45 lines
804 B
Vue
45 lines
804 B
Vue
<template>
|
|
<div class="formatted-date">
|
|
<p class="formatted-date__date">
|
|
{{ date }} <span class="formatted-date__time">{{ time }}</span>
|
|
</p>
|
|
<p class="formatted-date__zone">
|
|
(UTC+3)
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import dayjs from 'dayjs'
|
|
|
|
const props = defineProps({
|
|
value: { type: String, required: true },
|
|
})
|
|
|
|
const dayObj = computed(() => dayjs(props.value))
|
|
const date = computed(() => dayObj.value.format('DD.MM.YY'))
|
|
const time = computed(() => dayObj.value.format('HH:mm'))
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.formatted-date {
|
|
&__date {
|
|
@include txt-r-sb;
|
|
|
|
color: $clr-black;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
&__time {
|
|
color: $clr-grey-400;
|
|
}
|
|
|
|
&__zone {
|
|
@include txt-s-m;
|
|
|
|
color: $clr-grey-500;
|
|
margin-top: 4px;
|
|
}
|
|
}
|
|
</style>
|