Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 2x 2x 2x 1x 2x 2x 2x | <template>
<div
style="padding-right: 16px; font-size: 32px"
class="m-teaser-vertical m-teaser-vertical-event"
>
<div class="m-teaser-vertical__date-range">
<time class="m-teaser-vertical__date-range__item">
<span class="m-teaser-vertical__date-range__item__day">{{
formatDay()
}}</span>
<span class="m-teaser-vertical__date-range__item__month">{{
formatMonth()
}}</span>
</time>
</div>
</div>
</template>
<script setup lang="ts">
const props = defineProps<{
timestamp: number;
}>();
const formatDay = () => {
const date = new Date(props.timestamp * 1000);
return new Intl.DateTimeFormat("de-DE", { day: "numeric" }).format(date);
};
const formatMonth = () => {
const date = new Date(props.timestamp * 1000);
return new Intl.DateTimeFormat("de-DE", { month: "short" }).format(date);
};
</script>
<style scoped>
.m-teaser-vertical {
border-bottom: 0 !important;
}
.m-teaser-vertical__date-range {
position: unset !important;
border-top: 4px solid #005a9f !important;
}
</style>
|