update datepicker locale

This commit is contained in:
nor 2024-01-11 22:53:16 +08:00 committed by PterX
parent f6f915db86
commit 308ad23674
6 changed files with 22 additions and 24 deletions

View File

@ -81,7 +81,7 @@ import Popup from '@/components/misc/popup.vue'
import {DATE_RANGES} from '@/components/date/dateRanges' import {DATE_RANGES} from '@/components/date/dateRanges'
import BaseButton from '@/components/base/BaseButton.vue' import BaseButton from '@/components/base/BaseButton.vue'
import DatemathHelp from '@/components/date/datemathHelp.vue' import DatemathHelp from '@/components/date/datemathHelp.vue'
import { getFlatLanguage } from '@/helpers/dayLocale' import { getFlatpickrLanguage } from '@/helpers/dayLocale'
const {t} = useI18n({useScope: 'global'}) const {t} = useI18n({useScope: 'global'})
@ -92,7 +92,6 @@ const props = defineProps({
}, },
}) })
// FIXME: This seems to always contain the default value - that breaks the picker
const flatPickerConfig = computed(() => ({ const flatPickerConfig = computed(() => ({
altFormat: t('date.altFormatLong'), altFormat: t('date.altFormatLong'),
altInput: true, altInput: true,
@ -100,7 +99,7 @@ const flatPickerConfig = computed(() => ({
enableTime: false, enableTime: false,
wrap: true, wrap: true,
mode: 'range', mode: 'range',
locale: getFlatLanguage(), locale: getFlatpickrLanguage(),
})) }))
const showHowItWorks = ref(false) const showHowItWorks = ref(false)

View File

@ -81,7 +81,7 @@ import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
import {calculateNearestHours} from '@/helpers/time/calculateNearestHours' import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
import {createDateFromString} from '@/helpers/time/createDateFromString' import {createDateFromString} from '@/helpers/time/createDateFromString'
import {useI18n} from 'vue-i18n' import {useI18n} from 'vue-i18n'
import { getFlatLanguage } from '@/helpers/dayLocale' import { getFlatpickrLanguage } from '@/helpers/dayLocale'
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: {
@ -112,7 +112,7 @@ const flatPickerConfig = computed(() => ({
enableTime: true, enableTime: true,
time_24hr: true, time_24hr: true,
inline: true, inline: true,
locale: getFlatLanguage(), locale: getFlatpickrLanguage(),
})) }))
// Since flatpickr dates are strings, we need to convert them to native date objects. // Since flatpickr dates are strings, we need to convert them to native date objects.

View File

@ -44,7 +44,7 @@ import flatPickr from 'vue-flatpickr-component'
import TaskService from '@/services/task' import TaskService from '@/services/task'
import type {ITask} from '@/modelTypes/ITask' import type {ITask} from '@/modelTypes/ITask'
import { getFlatLanguage } from '@/helpers/dayLocale' import { getFlatpickrLanguage } from '@/helpers/dayLocale'
const { const {
modelValue, modelValue,
@ -101,7 +101,7 @@ const flatPickerConfig = computed(() => ({
enableTime: true, enableTime: true,
time_24hr: true, time_24hr: true,
inline: true, inline: true,
locale: getFlatLanguage(), locale: getFlatpickrLanguage(),
})) }))
function deferDays(days: number) { function deferDays(days: number) {

View File

@ -1,21 +1,21 @@
import {useAuthStore} from '@/stores/auth' import {useAuthStore} from '@/stores/auth'
import FlatpickrLanguages from 'flatpickr/dist/l10n' import FlatpickrLanguages from 'flatpickr/dist/l10n'
import type { CustomLocale } from 'flatpickr/dist/types/locale' import type { CustomLocale, key } from 'flatpickr/dist/types/locale'
export function getFlatLanguage(): CustomLocale { export function getFlatpickrLanguage(): CustomLocale {
const authStore = useAuthStore() const authStore = useAuthStore()
const lang = authStore.settings.language const lang = authStore.settings.language
const entries = Object.entries(FlatpickrLanguages).filter(([langKey]) => { const langPair = lang.split('-')
if (lang === 'vi-VN') { let language
return langKey === 'vn' if (langPair.length === 0) {
} else {
return langKey === lang || lang.startsWith(langKey + '-')
}
})
let language = entries.at(0)?.[1]
// default english
if (language == undefined) {
language = FlatpickrLanguages['en'] language = FlatpickrLanguages['en']
}else if (!(langPair[0] in FlatpickrLanguages)) {
language = FlatpickrLanguages['en']
}else if (langPair[0] === 'vi') {
language = FlatpickrLanguages['vn']
}else{
const fkey = langPair[0] as key
language = FlatpickrLanguages[fkey]
} }
language.firstDayOfWeek = authStore.settings.weekStart ?? 0 language.firstDayOfWeek = authStore.settings.weekStart ?? 0
return language return language

View File

@ -54,7 +54,7 @@ import {useI18n} from 'vue-i18n'
import type {RouteLocationNormalized} from 'vue-router' import type {RouteLocationNormalized} from 'vue-router'
import {useBaseStore} from '@/stores/base' import {useBaseStore} from '@/stores/base'
import { getFlatLanguage } from '@/helpers/dayLocale' import { getFlatpickrLanguage } from '@/helpers/dayLocale'
import Foo from '@/components/misc/flatpickr/Flatpickr.vue' import Foo from '@/components/misc/flatpickr/Flatpickr.vue'
import ProjectWrapper from '@/components/project/ProjectWrapper.vue' import ProjectWrapper from '@/components/project/ProjectWrapper.vue'
@ -132,7 +132,7 @@ const flatPickerConfig = computed<Options>(() => ({
defaultDate: initialDateRange, defaultDate: initialDateRange,
enableTime: false, enableTime: false,
mode: 'range', mode: 'range',
locale: getFlatLanguage(), locale: getFlatpickrLanguage(),
})) }))
</script> </script>

View File

@ -12,8 +12,7 @@ import 'flatpickr/dist/flatpickr.css'
import {useI18n} from 'vue-i18n' import {useI18n} from 'vue-i18n'
import Message from '@/components/misc/message.vue' import Message from '@/components/misc/message.vue'
import type {IApiToken} from '@/modelTypes/IApiToken' import type {IApiToken} from '@/modelTypes/IApiToken'
import FlatpickrLanguages from 'flatpickr/dist/l10n' import { getFlatpickrLanguage } from '@/helpers/dayLocale'
import { getFlatLanguage } from '@/helpers/dayLocale'
const service = new ApiTokenService() const service = new ApiTokenService()
const tokens = ref<IApiToken[]>([]) const tokens = ref<IApiToken[]>([])
@ -42,7 +41,7 @@ const flatPickerConfig = computed(() => ({
dateFormat: 'Y-m-d H:i', dateFormat: 'Y-m-d H:i',
enableTime: true, enableTime: true,
time_24hr: true, time_24hr: true,
locale: getFlatLanguage(), locale: getFlatpickrLanguage(),
minDate: now, minDate: now,
})) }))