Use the correct locale to create the event date and time icons

This commit is contained in:
Sosthène Guédon 2024-06-30 18:25:43 +02:00
parent 1217f8a777
commit 462ed5b3c7
2 changed files with 16 additions and 5 deletions

View File

@ -22,7 +22,12 @@
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from "vue"; import { computed, watch } from "vue";
import { useI18n } from "vue-i18n";
const { locale } = useI18n({ useScope: "global" });
const localeConverted = locale.replace("_", "-");
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
@ -35,15 +40,15 @@ const props = withDefaults(
const dateObj = computed<Date>(() => new Date(props.date)); const dateObj = computed<Date>(() => new Date(props.date));
const month = computed<string>(() => const month = computed<string>(() =>
dateObj.value.toLocaleString(undefined, { month: "short" }) dateObj.value.toLocaleString(localeConverted, { month: "short" })
); );
const day = computed<string>(() => const day = computed<string>(() =>
dateObj.value.toLocaleString(undefined, { day: "numeric" }) dateObj.value.toLocaleString(localeConverted, { day: "numeric" })
); );
const weekday = computed<string>(() => const weekday = computed<string>(() =>
dateObj.value.toLocaleString(undefined, { weekday: "short" }) dateObj.value.toLocaleString(localeConverted, { weekday: "short" })
); );
const smallStyle = computed<string>(() => (props.small ? "1.2" : "2")); const smallStyle = computed<string>(() => (props.small ? "1.2" : "2"));

View File

@ -13,8 +13,14 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from "vue"; import { computed } from "vue";
import { useI18n } from "vue-i18n";
import Clock from "vue-material-design-icons/ClockTimeTenOutline.vue"; import Clock from "vue-material-design-icons/ClockTimeTenOutline.vue";
const { locale } = useI18n({ useScope: "global" });
const localeConverted = locale.replace("_", "-");
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
date: string; date: string;
@ -26,7 +32,7 @@ const props = withDefaults(
const dateObj = computed<Date>(() => new Date(props.date)); const dateObj = computed<Date>(() => new Date(props.date));
const time = computed<string>(() => const time = computed<string>(() =>
dateObj.value.toLocaleTimeString(undefined, { dateObj.value.toLocaleTimeString(localeConverted, {
hour: "2-digit", hour: "2-digit",
minute: "2-digit", minute: "2-digit",
}) })