70 lines
2.7 KiB
Vue
70 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import { getWeek, getWeekOfMonth } from 'date-fns';
|
|
import { getFirstMondayFromISOWeek, getFirstMondayFromMonthWeek } from './week-number-converter.service';
|
|
|
|
const now = new Date();
|
|
|
|
const inputDate = ref(now.getTime());
|
|
const outputWeekInMonth = computed(() => getWeekOfMonth(inputDate.value));
|
|
const outputWeekInYear = computed(() => getWeek(inputDate.value));
|
|
|
|
const inputWeekInMonth = ref({
|
|
week: getWeekOfMonth(now),
|
|
month: now.getMonth() + 1,
|
|
year: now.getFullYear(),
|
|
});
|
|
const outputWeekInMonthMonday = computed(() => getFirstMondayFromMonthWeek(inputWeekInMonth.value.week, inputWeekInMonth.value.month, inputWeekInMonth.value.year));
|
|
|
|
const inputWeekInYear = ref({
|
|
week: getWeek(now),
|
|
year: now.getFullYear(),
|
|
});
|
|
const outputWeekInYearMonday = computed(() => getFirstMondayFromISOWeek(inputWeekInYear.value.week, inputWeekInYear.value.year));
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<c-card title="Date to Week numbers" mb-2>
|
|
<n-form-item label="Date:" label-placement="left">
|
|
<n-date-picker v-model:value="inputDate" type="date" />
|
|
</n-form-item>
|
|
|
|
<n-divider />
|
|
|
|
<input-copyable readonly label="Week in Year:" label-position="left" label-width="120px" :value="outputWeekInYear" mb-1 />
|
|
<input-copyable readonly label="Week in Month:" label-position="left" label-width="120px" :value="outputWeekInMonth" mb-1 />
|
|
</c-card>
|
|
<c-card title="Year Week Number to Date" mb-2>
|
|
<div flex items-baseline gap-2>
|
|
<n-form-item label="Week in Year:" label-placement="left" flex-1>
|
|
<n-input-number v-model:value="inputWeekInYear.week" :min="1" :max="53" />
|
|
</n-form-item>
|
|
<n-form-item label="Year:" label-placement="left" flex-1>
|
|
<n-input-number v-model:value="inputWeekInYear.year" />
|
|
</n-form-item>
|
|
</div>
|
|
|
|
<n-divider />
|
|
|
|
<input-copyable readonly label="First Monday" label-position="left" :value="outputWeekInYearMonday" />
|
|
</c-card>
|
|
<c-card title="Month Week Number to Date" mb-2>
|
|
<div flex items-baseline gap-2>
|
|
<n-form-item label="Week in Month:" label-placement="left" flex-1>
|
|
<n-input-number v-model:value="inputWeekInMonth.week" :min="1" :max="5" />
|
|
</n-form-item>
|
|
<n-form-item label="Month:" label-placement="left" flex-1>
|
|
<n-input-number v-model:value="inputWeekInMonth.month" :min="1" :max="12" />
|
|
</n-form-item>
|
|
<n-form-item label="Year:" label-placement="left" flex-1>
|
|
<n-input-number v-model:value="inputWeekInMonth.year" />
|
|
</n-form-item>
|
|
</div>
|
|
|
|
<n-divider />
|
|
|
|
<input-copyable readonly label="First Monday" label-position="left" :value="outputWeekInMonthMonday" />
|
|
</c-card>
|
|
</div>
|
|
</template>
|