fix(frontend): respect user's 12h/24h time format in date pickers

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

@@ -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,
 }))

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,
 }))

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,
 }))