55 lines
1.2 KiB
Vue
55 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
|
|
const props = defineProps<{
|
|
dateStr: string
|
|
}>()
|
|
|
|
defineEmits<{
|
|
(e: 'addAllEntriesClicked'): void
|
|
}>()
|
|
|
|
const date = computed(() => getDate(props.dateStr))
|
|
const weekday = computed(() => getWeekday(date.value))
|
|
|
|
function getDate(dateStr: string): Date {
|
|
const year = parseInt(dateStr.substring(0, 4), 10)
|
|
const month = parseInt(dateStr.substring(5, 7), 10)
|
|
const day = parseInt(dateStr.substring(8, 10), 10)
|
|
return new Date(year, month - 1, day)
|
|
}
|
|
|
|
function getWeekday(date: Date): string {
|
|
const names = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
|
|
return names[date.getDay()]
|
|
}
|
|
</script>
|
|
<template>
|
|
<th>
|
|
<div class="date-header-container">
|
|
<div class="date-header-button">
|
|
<span title="Add All Entries" @click="$emit('addAllEntriesClicked')">+</span>
|
|
</div>
|
|
<div>
|
|
<span>{{ weekday }}</span>
|
|
<br>
|
|
<span>{{ date.toLocaleDateString() }}</span>
|
|
</div>
|
|
</div>
|
|
</th>
|
|
</template>
|
|
<style scoped>
|
|
.date-header-container {
|
|
padding-left: 0.5em;
|
|
padding-right: 0.5em;
|
|
}
|
|
|
|
.date-header-button {
|
|
float: right;
|
|
}
|
|
|
|
.date-header-button:hover {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|