datepicker locale support

src/components/date/datepickerWithRange.vue

@@ -82,6 +82,8 @@ import {DATE_RANGES} from '@/components/date/dateRanges'
 import BaseButton from '@/components/base/BaseButton.vue'
 import DatemathHelp from '@/components/date/datemathHelp.vue'
 import {useAuthStore} from '@/stores/auth'
+import FlatpickrLanguages from 'flatpickr/dist/l10n'
+import {TRANS_LOCALES} from '@/i18n'
 
 const authStore = useAuthStore()
 const {t} = useI18n({useScope: 'global'})
@@ -95,6 +97,8 @@ const props = defineProps({
 
 // FIXME: This seems to always contain the default value - that breaks the picker
 const weekStart = computed(() => authStore.settings.weekStart ?? 0)
+const locLang = FlatpickrLanguages[TRANS_LOCALES[authStore.settings.language]]
+locLang.firstDayOfWeek = weekStart.value
 const flatPickerConfig = computed(() => ({
 	altFormat: t('date.altFormatLong'),
 	altInput: true,
@@ -102,9 +106,7 @@ const flatPickerConfig = computed(() => ({
 	enableTime: false,
 	wrap: true,
 	mode: 'range',
-	locale: {
-		firstDayOf7Days: weekStart.value,
-	},
+	locale: locLang,
 }))
 
 const showHowItWorks = ref(false)

src/components/input/datepickerInline.vue

@@ -82,6 +82,8 @@ import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
 import {createDateFromString} from '@/helpers/time/createDateFromString'
 import {useAuthStore} from '@/stores/auth'
 import {useI18n} from 'vue-i18n'
+import FlatpickrLanguages from 'flatpickr/dist/l10n'
+import {TRANS_LOCALES} from '@/i18n'
 
 const props = defineProps({
 	modelValue: {
@@ -107,6 +109,8 @@ watch(
 
 const authStore = useAuthStore()
 const weekStart = computed(() => authStore.settings.weekStart)
+const locLang = FlatpickrLanguages[TRANS_LOCALES[authStore.settings.language]]
+locLang.firstDayOfWeek = weekStart.value
 const flatPickerConfig = computed(() => ({
 	altFormat: t('date.altFormatLong'),
 	altInput: true,
@@ -114,9 +118,7 @@ const flatPickerConfig = computed(() => ({
 	enableTime: true,
 	time_24hr: true,
 	inline: true,
-	locale: {
-		firstDayOfWeek: weekStart.value,
-	},
+	locale: locLang,
 }))
 
 // Since flatpickr dates are strings, we need to convert them to native date objects.

src/components/tasks/GanttChart.vue

@@ -61,6 +61,8 @@ import {
 import Loading from '@/components/misc/loading.vue'
 import {MILLISECONDS_A_DAY} from '@/constants/date'
 import {useWeekDayFromDate} from '@/helpers/time/formatDate'
+import dayjs from 'dayjs'
+import {useDayjsLanguageSync} from '@/i18n/useDayjsLanguageSync'
 
 export interface GanttChartProps {
 	isLoading: boolean,
@@ -81,8 +83,8 @@ const emit = defineEmits<{
 const {tasks, filters} = toRefs(props)
 
 // setup dayjs for vue-ganttastic
-const dayjsLanguageLoading = ref(false)
-// const dayjsLanguageLoading = useDayjsLanguageSync(dayjs)
+// const dayjsLanguageLoading = ref(false)
+const dayjsLanguageLoading = useDayjsLanguageSync(dayjs)
 extendDayjs()
 
 const ganttContainer = ref(null)

src/components/tasks/partials/defer-task.vue

@@ -45,6 +45,8 @@ import flatPickr from 'vue-flatpickr-component'
 import TaskService from '@/services/task'
 import type {ITask} from '@/modelTypes/ITask'
 import {useAuthStore} from '@/stores/auth'
+import FlatpickrLanguages from 'flatpickr/dist/l10n'
+import {TRANS_LOCALES} from '@/i18n'
 
 const {
 	modelValue,
@@ -95,6 +97,9 @@ onBeforeUnmount(() => {
 	updateDueDate()
 })
 
+const locLang = FlatpickrLanguages[TRANS_LOCALES[authStore.settings.language]]
+locLang.firstDayOfWeek = authStore.settings.weekStart
+
 const flatPickerConfig = computed(() => ({
 	altFormat: t('date.altFormatLong'),
 	altInput: true,
@@ -102,9 +107,7 @@ const flatPickerConfig = computed(() => ({
 	enableTime: true,
 	time_24hr: true,
 	inline: true,
-	locale: {
-		firstDayOfWeek: authStore.settings.weekStart,
-	},
+	locale: locLang,
 }))
 
 function deferDays(days: number) {

src/i18n/index.ts

@@ -23,6 +23,28 @@ export const SUPPORTED_LOCALES = {
 	'sl-SI': 'Slovenščina',
 } as const
 
+export const TRANS_LOCALES = {
+	'en': 'en',
+	'de-DE': 'de',
+	'de-swiss': 'de',
+	'ru-RU': 'ru',
+	'fr-FR': 'fr',
+	'vi-VN': 'vn',
+	'it-IT': 'it',
+	'cs-CZ': 'cs',
+	'pl-PL': 'pl',
+	'nl-NL': 'nl',
+	'pt-PT': 'pt',
+	'zh-CN': 'zh',
+	'no-NO': 'no',
+	'es-ES': 'es',
+	'da-DK': 'da',
+	'ja-JP': 'ja',
+	'hu-HU': 'hu',
+	'ar-SA': 'ar',
+	'sl-SI': 'sl',
+} as const
+
 export type SupportedLocale = keyof typeof SUPPORTED_LOCALES
 
 export const DEFAULT_LANGUAGE: SupportedLocale= 'en'

src/views/project/ProjectGantt.vue

@@ -50,6 +50,8 @@
 <script setup lang="ts">
 import {computed, ref, toRefs} from 'vue'
 import type Flatpickr from 'flatpickr'
+import FlatpickrLanguages from 'flatpickr/dist/l10n'
+import {TRANS_LOCALES} from '@/i18n'
 import {useI18n} from 'vue-i18n'
 import type {RouteLocationNormalized} from 'vue-router'
 
@@ -127,15 +129,15 @@ const initialDateRange = [filters.value.dateFrom, filters.value.dateTo]
 
 const {t} = useI18n({useScope: 'global'})
 const authStore = useAuthStore()
+const locLang = FlatpickrLanguages[TRANS_LOCALES[authStore.settings.language]]
+locLang.firstDayOfWeek = authStore.settings.weekStart
 const flatPickerConfig = computed<Options>(() => ({
 	altFormat: t('date.altFormatShort'),
 	altInput: true,
 	defaultDate: initialDateRange,
 	enableTime: false,
 	mode: 'range',
-	locale: {
-		firstDayOfWeek: authStore.settings.weekStart,
-	},
+	locale: locLang,
 }))
 </script>
 

src/views/user/settings/ApiTokens.vue

@@ -13,6 +13,8 @@ import {useI18n} from 'vue-i18n'
 import {useAuthStore} from '@/stores/auth'
 import Message from '@/components/misc/message.vue'
 import type {IApiToken} from '@/modelTypes/IApiToken'
+import FlatpickrLanguages from 'flatpickr/dist/l10n'
+import {TRANS_LOCALES} from '@/i18n'
 
 const service = new ApiTokenService()
 const tokens = ref<IApiToken[]>([])
@@ -35,15 +37,16 @@ const {t} = useI18n()
 const authStore = useAuthStore()
 
 const now = new Date()
+const locLang = FlatpickrLanguages[TRANS_LOCALES[authStore.settings.language]]
+locLang.firstDayOfWeek = authStore.settings.weekStart
+
 const flatPickerConfig = computed(() => ({
 	altFormat: t('date.altFormatLong'),
 	altInput: true,
 	dateFormat: 'Y-m-d H:i',
 	enableTime: true,
 	time_24hr: true,
-	locale: {
-		firstDayOfWeek: authStore.settings.weekStart,
-	},
+	locale: locLang,
 	minDate: now,
 }))