forked from vikunja/frontend
update datepicker locale
This commit is contained in:
parent
b65abff122
commit
f6f915db86
|
@ -81,11 +81,8 @@ import Popup from '@/components/misc/popup.vue'
|
|||
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'
|
||||
import { getFlatLanguage } from '@/helpers/dayLocale'
|
||||
|
||||
const authStore = useAuthStore()
|
||||
const {t} = useI18n({useScope: 'global'})
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
@ -96,9 +93,6 @@ 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,
|
||||
|
@ -106,7 +100,7 @@ const flatPickerConfig = computed(() => ({
|
|||
enableTime: false,
|
||||
wrap: true,
|
||||
mode: 'range',
|
||||
locale: locLang,
|
||||
locale: getFlatLanguage(),
|
||||
}))
|
||||
|
||||
const showHowItWorks = ref(false)
|
||||
|
|
|
@ -80,10 +80,8 @@ import {formatDate} from '@/helpers/time/formatDate'
|
|||
import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
|
||||
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'
|
||||
import { getFlatLanguage } from '@/helpers/dayLocale'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
|
@ -107,10 +105,6 @@ watch(
|
|||
{immediate: true},
|
||||
)
|
||||
|
||||
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,
|
||||
|
@ -118,7 +112,7 @@ const flatPickerConfig = computed(() => ({
|
|||
enableTime: true,
|
||||
time_24hr: true,
|
||||
inline: true,
|
||||
locale: locLang,
|
||||
locale: getFlatLanguage(),
|
||||
}))
|
||||
|
||||
// Since flatpickr dates are strings, we need to convert them to native date objects.
|
||||
|
|
|
@ -44,9 +44,7 @@ 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'
|
||||
import { getFlatLanguage } from '@/helpers/dayLocale'
|
||||
|
||||
const {
|
||||
modelValue,
|
||||
|
@ -57,7 +55,6 @@ const {
|
|||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const {t} = useI18n({useScope: 'global'})
|
||||
const authStore = useAuthStore()
|
||||
|
||||
const taskService = shallowReactive(new TaskService())
|
||||
const task = ref<ITask>()
|
||||
|
@ -97,9 +94,6 @@ onBeforeUnmount(() => {
|
|||
updateDueDate()
|
||||
})
|
||||
|
||||
const locLang = FlatpickrLanguages[TRANS_LOCALES[authStore.settings.language]]
|
||||
locLang.firstDayOfWeek = authStore.settings.weekStart
|
||||
|
||||
const flatPickerConfig = computed(() => ({
|
||||
altFormat: t('date.altFormatLong'),
|
||||
altInput: true,
|
||||
|
@ -107,7 +101,7 @@ const flatPickerConfig = computed(() => ({
|
|||
enableTime: true,
|
||||
time_24hr: true,
|
||||
inline: true,
|
||||
locale: locLang,
|
||||
locale: getFlatLanguage(),
|
||||
}))
|
||||
|
||||
function deferDays(days: number) {
|
||||
|
|
22
src/helpers/dayLocale.ts
Normal file
22
src/helpers/dayLocale.ts
Normal file
|
@ -0,0 +1,22 @@
|
|||
import {useAuthStore} from '@/stores/auth'
|
||||
import FlatpickrLanguages from 'flatpickr/dist/l10n'
|
||||
import type { CustomLocale } from 'flatpickr/dist/types/locale'
|
||||
|
||||
export function getFlatLanguage(): CustomLocale {
|
||||
const authStore = useAuthStore()
|
||||
const lang = authStore.settings.language
|
||||
const entries = Object.entries(FlatpickrLanguages).filter(([langKey]) => {
|
||||
if (lang === 'vi-VN') {
|
||||
return langKey === 'vn'
|
||||
} else {
|
||||
return langKey === lang || lang.startsWith(langKey + '-')
|
||||
}
|
||||
})
|
||||
let language = entries.at(0)?.[1]
|
||||
// default english
|
||||
if (language == undefined) {
|
||||
language = FlatpickrLanguages['en']
|
||||
}
|
||||
language.firstDayOfWeek = authStore.settings.weekStart ?? 0
|
||||
return language
|
||||
}
|
|
@ -23,28 +23,6 @@ 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'
|
||||
|
|
|
@ -50,13 +50,11 @@
|
|||
<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'
|
||||
|
||||
import {useBaseStore} from '@/stores/base'
|
||||
import {useAuthStore} from '@/stores/auth'
|
||||
import { getFlatLanguage } from '@/helpers/dayLocale'
|
||||
|
||||
import Foo from '@/components/misc/flatpickr/Flatpickr.vue'
|
||||
import ProjectWrapper from '@/components/project/ProjectWrapper.vue'
|
||||
|
@ -128,16 +126,13 @@ const flatPickerDateRange = computed<Date[]>({
|
|||
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: locLang,
|
||||
locale: getFlatLanguage(),
|
||||
}))
|
||||
</script>
|
||||
|
||||
|
|
|
@ -10,11 +10,10 @@ import {MILLISECONDS_A_DAY} from '@/constants/date'
|
|||
import flatPickr from 'vue-flatpickr-component'
|
||||
import 'flatpickr/dist/flatpickr.css'
|
||||
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'
|
||||
import { getFlatLanguage } from '@/helpers/dayLocale'
|
||||
|
||||
const service = new ApiTokenService()
|
||||
const tokens = ref<IApiToken[]>([])
|
||||
|
@ -34,11 +33,8 @@ const showDeleteModal = ref<boolean>(false)
|
|||
const tokenToDelete = ref<IApiToken>()
|
||||
|
||||
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'),
|
||||
|
@ -46,7 +42,7 @@ const flatPickerConfig = computed(() => ({
|
|||
dateFormat: 'Y-m-d H:i',
|
||||
enableTime: true,
|
||||
time_24hr: true,
|
||||
locale: locLang,
|
||||
locale: getFlatLanguage(),
|
||||
minDate: now,
|
||||
}))
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user