From 469ee8f364850794c9c7238cf99f4af6cb1735f3 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 5 May 2026 16:17:16 +0200
Subject: [PATCH] fix(frontend): respect user's 12h/24h time format in date
 pickers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The flatpickr time inputs hardcoded `time_24hr: true`, so users who
selected the 12-hour format in their settings still got a 24-hour
picker — even though the displayed dates respected the preference.

Bind `time_24hr` to the existing `useTimeFormat` composable in:
- DatepickerInline (start/end/due dates and absolute reminders)
- DeferTask (defer due date)
- ApiTokenForm (API token expiry)

Reported at https://community.vikunja.io/t/4492.
---
 frontend/src/components/input/DatepickerInline.vue   | 5 ++++-
 frontend/src/components/tasks/partials/DeferTask.vue | 5 ++++-
 frontend/src/components/token/ApiTokenForm.vue       | 5 ++++-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/input/DatepickerInline.vue b/frontend/src/components/input/DatepickerInline.vue
index de6503833..9f0467889 100644
--- a/frontend/src/components/input/DatepickerInline.vue
+++ b/frontend/src/components/input/DatepickerInline.vue
@@ -84,6 +84,8 @@ import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
 import {createDateFromString} from '@/helpers/time/createDateFromString'
 import {useI18n} from 'vue-i18n'
 import {useFlatpickrLanguage} from '@/helpers/useFlatpickrLanguage'
+import {useTimeFormat} from '@/composables/useTimeFormat'
+import {TIME_FORMAT} from '@/constants/timeFormat'
 
 const props = defineProps<{
 	modelValue: Date | null | string
@@ -94,6 +96,7 @@ const emit = defineEmits<{
 }>()
 
 const {t} = useI18n({useScope: 'global'})
+const {store: timeFormat} = useTimeFormat()
 
 const date = ref<Date | null>(null)
 const changed = ref(false)
@@ -111,7 +114,7 @@ const flatPickerConfig = computed(() => ({
 	altInput: true,
 	dateFormat: 'Y-m-d H:i',
 	enableTime: true,
-	time_24hr: true,
+	time_24hr: timeFormat.value === TIME_FORMAT.HOURS_24,
 	inline: true,
 	locale: useFlatpickrLanguage().value,
 }))
diff --git a/frontend/src/components/tasks/partials/DeferTask.vue b/frontend/src/components/tasks/partials/DeferTask.vue
index 6092d63c7..b29bb2a0f 100644
--- a/frontend/src/components/tasks/partials/DeferTask.vue
+++ b/frontend/src/components/tasks/partials/DeferTask.vue
@@ -49,6 +49,8 @@ import flatPickr from 'vue-flatpickr-component'
 import TaskService from '@/services/task'
 import type {ITask} from '@/modelTypes/ITask'
 import {useFlatpickrLanguage} from '@/helpers/useFlatpickrLanguage'
+import {useTimeFormat} from '@/composables/useTimeFormat'
+import {TIME_FORMAT} from '@/constants/timeFormat'
 
 const props = defineProps<{
 	modelValue: ITask,
@@ -59,6 +61,7 @@ const emit = defineEmits<{
 }>()
 
 const {t} = useI18n({useScope: 'global'})
+const {store: timeFormat} = useTimeFormat()
 
 const taskService = shallowReactive(new TaskService())
 const task = ref<ITask>()
@@ -103,7 +106,7 @@ const flatPickerConfig = computed(() => ({
 	altInput: true,
 	dateFormat: 'Y-m-d H:i',
 	enableTime: true,
-	time_24hr: true,
+	time_24hr: timeFormat.value === TIME_FORMAT.HOURS_24,
 	inline: true,
 	locale: useFlatpickrLanguage().value,
 }))
diff --git a/frontend/src/components/token/ApiTokenForm.vue b/frontend/src/components/token/ApiTokenForm.vue
index 5de674ce0..77f6b1e22 100644
--- a/frontend/src/components/token/ApiTokenForm.vue
+++ b/frontend/src/components/token/ApiTokenForm.vue
@@ -11,6 +11,8 @@ import 'flatpickr/dist/flatpickr.css'
 import {useI18n} from 'vue-i18n'
 import FormField from '@/components/input/FormField.vue'
 import type {IApiToken} from '@/modelTypes/IApiToken'
+import {useTimeFormat} from '@/composables/useTimeFormat'
+import {TIME_FORMAT} from '@/constants/timeFormat'
 
 const props = withDefaults(defineProps<{
 	ownerId?: number,
@@ -31,6 +33,7 @@ const emit = defineEmits<{
 
 const service = new ApiTokenService()
 const {t} = useI18n()
+const {store: timeFormat} = useTimeFormat()
 const now = new Date()
 
 const availableRoutes = ref(null)
@@ -98,7 +101,7 @@ const flatPickerConfig = computed(() => ({
 	altInput: true,
 	dateFormat: 'Y-m-d H:i',
 	enableTime: true,
-	time_24hr: true,
+	time_24hr: timeFormat.value === TIME_FORMAT.HOURS_24,
 	locale: useFlatpickrLanguage().value,
 	minDate: now,
 }))