Use the correct locale to create the event date and time icons
This commit is contained in:
parent
1217f8a777
commit
462ed5b3c7
|
@ -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"));
|
||||||
|
|
|
@ -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",
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in New Issue