time selector in mobile version supports loop selection

src/components/mobile/DateTimeSelectionSheet.vue

@@ -35,7 +35,73 @@
                 </vue-date-picker>
             </div>
             <div class="block block-outline no-margin no-padding padding-vertical-half" v-show="mode === 'time'">
-                <div id="time-picker-container" class="time-picker-container"></div>
+                <div id="time-picker-container" class="time-picker-container">
+                    <div class="picker picker-inline picker-3d">
+                        <div class="picker-columns">
+                            <div class="picker-column" v-if="!is24Hour && isMeridiemIndicatorFirst">
+                                <div class="picker-items picker-items-meridiem-indicator-first"
+                                     @scroll="onPickerColumnScroll('picker-items-meridiem-indicator-first', 'picker-meridiem-indicator', false)">
+                                    <div :class="{ 'picker-item': true, 'picker-meridiem-indicator': true, 'picker-item-selected': currentMeridiemIndicator === item.value }"
+                                         :key="item.value" :data-value="item.value"
+                                         @click="currentMeridiemIndicator = item.value; scrollToSelectedItem('picker-items-meridiem-indicator-first', 'picker-meridiem-indicator', item.value)"
+                                         v-for="item in meridiemItems">
+                                        <span>{{ item.name }}</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="picker-column">
+                                <div class="picker-items picker-items-hour"
+                                     @scroll="onPickerColumnScroll('picker-items-hour', 'picker-hour', false)"
+                                     @scrollend="onPickerColumnScroll('picker-items-hour', 'picker-hour', true)">
+                                    <div :class="{ 'picker-item': true, 'picker-hour': true, 'picker-item-selected': currentHour === item.value }"
+                                         :key="`${item.itemsIndex}_${item.value}`" :data-items-index="item.itemsIndex" :data-value="item.value"
+                                         @click="currentHour = item.value; scrollToSelectedItem('picker-items-hour', 'picker-hour', item.value)"
+                                         v-for="item in hourItems">
+                                        <span :style="getTimerPickerItemStyle(item.value, currentHour, item.itemsIndex, hourItems)">{{ item.value }}</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="picker-column picker-column-divider">:</div>
+                            <div class="picker-column">
+                                <div class="picker-items picker-items-minute"
+                                     @scroll="onPickerColumnScroll('picker-items-minute', 'picker-minute', false)"
+                                     @scrollend="onPickerColumnScroll('picker-items-minute', 'picker-minute', true)">
+                                    <div :class="{ 'picker-item': true, 'picker-minute': true, 'picker-item-selected': currentMinute === item.value }"
+                                         :key="`${item.itemsIndex}_${item.value}`" :data-items-index="item.itemsIndex" :data-value="item.value"
+                                         @click="currentMinute = item.value; scrollToSelectedItem('picker-items-minute', 'picker-minute', item.value)"
+                                         v-for="item in minuteItems">
+                                        <span :style="getTimerPickerItemStyle(item.value, currentMinute, item.itemsIndex, minuteItems)">{{ item.value }}</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="picker-column picker-column-divider">:</div>
+                            <div class="picker-column">
+                                <div class="picker-items picker-items-second"
+                                     @scroll="onPickerColumnScroll('picker-items-second', 'picker-second', false)"
+                                     @scrollend="onPickerColumnScroll('picker-items-second', 'picker-second', true)">
+                                    <div :class="{ 'picker-item': true, 'picker-second': true, 'picker-item-selected': currentSecond === item.value }"
+                                         :key="`${item.itemsIndex}_${item.value}`" :data-items-index="item.itemsIndex" :data-value="item.value"
+                                         @click="currentSecond = item.value; scrollToSelectedItem('picker-items-second', 'picker-second', item.value)"
+                                         v-for="item in secondItems">
+                                        <span :style="getTimerPickerItemStyle(item.value, currentSecond, item.itemsIndex, secondItems)">{{ item.value }}</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="picker-column" v-if="!is24Hour && !isMeridiemIndicatorFirst">
+                                <div class="picker-items picker-items-meridiem-indicator-last"
+                                     @scroll="onPickerColumnScroll('picker-items-meridiem-indicator-last', 'picker-meridiem-indicator', false)">
+                                    <div :class="{ 'picker-item': true, 'picker-meridiem-indicator': true, 'picker-item-selected': currentMeridiemIndicator === item.value }"
+                                         :key="item.value" :data-value="item.value"
+                                         @click="currentMeridiemIndicator = item.value; scrollToSelectedItem('picker-items-meridiem-indicator-last', 'picker-meridiem-indicator', item.value)"
+                                         v-for="item in meridiemItems">
+                                        <span>{{ item.name }}</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="picker-center-highlight"></div>
+                        </div>
+                    </div>
+                </div>
             </div>
             <input id="time-picker-input" style="display: none" type="text" :readonly="true"/>
             <div class="margin-top text-align-center">
@@ -49,32 +115,39 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, nextTick, useTemplateRef, onBeforeUnmount } from 'vue';
+import { ref, computed, nextTick, useTemplateRef, watch } from 'vue';
 import VueDatePicker from '@vuepic/vue-datepicker';
-import type { Picker } from 'framework7/types';
 
 import { useI18n } from '@/locales/helpers.ts';
-import { useI18nUIComponents, createInlinePicker } from '@/lib/ui/mobile.ts';
+import { useI18nUIComponents } from '@/lib/ui/mobile.ts';
 
 import { useEnvironmentsStore } from '@/stores/environment.ts';
 import { useUserStore } from '@/stores/user.ts';
 
+import { type NameValue } from '@/core/base.ts';
 import { type WeekDayValue } from '@/core/datetime.ts';
-import { arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
+import { isDefined, arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
 import {
-    getCurrentUnixTime,
-    getCurrentYear,
-    getUnixTime,
+    getTwoDigitsString,
+    getHourIn12HourFormat,
+    getTimezoneOffsetMinutes,
     getBrowserTimezoneOffsetMinutes,
     getLocalDatetimeFromUnixTime,
     getActualUnixTimeForStore,
-    getTimezoneOffsetMinutes,
-    getTimeValues,
+    getCurrentUnixTime,
+    getCurrentYear,
+    getUnixTime,
+    getAMOrPM,
     getCombinedDateAndTimeValues
 } from '@/lib/datetime.ts';
 
 type VueDatePickerType = InstanceType<typeof VueDatePicker>;
 
+interface TimePickerValue {
+    value: string;
+    itemsIndex: number;
+}
+
 const props = defineProps<{
     modelValue: number;
     initMode?: string;
@@ -94,7 +167,10 @@ const userStore = useUserStore();
 
 const is24Hour: boolean = isLongTime24HourFormat();
 const isMeridiemIndicatorFirst: boolean = isLongTimeMeridiemIndicatorFirst() || false;
-let timePickerHolder: Picker.Picker | null = null;
+let resetTimePickerItemPositionItemsClass: string | undefined = undefined;
+let resetTimePickerItemPositionItemClass: string | undefined = undefined;
+let resetTimePickerItemPositionItemsLastOffsetTop: number | undefined = undefined;
+let resetTimePickerItemPositionCheckedFrames: number | undefined = undefined;
 
 const mode = ref<string>(props.initMode || 'time');
 const yearRange = ref<number[]>([
@@ -102,10 +178,49 @@ const yearRange = ref<number[]>([
     getCurrentYear() + 1
 ]);
 const dateTime = ref<Date>(getLocalDatetimeFromUnixTime(props.modelValue || getCurrentUnixTime()));
-const timeValues = ref<string[]>(getTimeValues(dateTime.value, is24Hour, isMeridiemIndicatorFirst));
+const timePickerContainerHeight = ref<number | undefined>(undefined);
+const timePickerItemHeight = ref<number | undefined>(undefined);
 
 const datetimepicker = useTemplateRef<VueDatePickerType>('datetimepicker');
 
+const currentMeridiemIndicator = computed<string>({
+    get: () => {
+        return getAMOrPM(dateTime.value.getHours())
+    },
+    set: (value: string) => {
+        dateTime.value = getCombinedDateAndTimeValues(dateTime.value, currentHour.value, currentMinute.value, currentSecond.value, value, is24Hour);
+    }
+});
+const currentHour = computed<string>({
+    get: () => {
+        return getTwoDigitsString(is24Hour ? dateTime.value.getHours() : getHourIn12HourFormat(dateTime.value.getHours()))
+    },
+    set: (value: string) => {
+        dateTime.value = getCombinedDateAndTimeValues(dateTime.value, value, currentMinute.value, currentSecond.value, currentMeridiemIndicator.value, is24Hour);
+    }
+});
+const currentMinute = computed<string>({
+    get: () => {
+        return getTwoDigitsString(dateTime.value.getMinutes());
+    },
+    set: (value: string) => {
+        dateTime.value = getCombinedDateAndTimeValues(dateTime.value, currentHour.value, value, currentSecond.value, currentMeridiemIndicator.value, is24Hour);
+    }
+});
+const currentSecond = computed<string>({
+    get: () => {
+        return getTwoDigitsString(dateTime.value.getSeconds());
+    },
+    set: (value: string) => {
+        dateTime.value = getCombinedDateAndTimeValues(dateTime.value, currentHour.value, currentMinute.value, value, currentMeridiemIndicator.value, is24Hour);
+    }
+});
+
+const hourItems = computed<TimePickerValue[]>(() => generateAllHours(3));
+const minuteItems = computed<TimePickerValue[]>(() => generateAllMinutesOrSeconds(3));
+const secondItems = computed<TimePickerValue[]>(() => generateAllMinutesOrSeconds(3));
+const meridiemItems = computed<NameValue[]>(() => getAllMeridiemIndicators());
+
 const isDarkMode = computed<boolean>(() => environmentsStore.framework7DarkMode || false);
 const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
 const dayNames = computed<string[]>(() => arrangeArrayWithNewStartIndex(getAllMinWeekdayNames(), firstDayOfWeek.value));
@@ -118,16 +233,14 @@ function switchMode(): void {
         mode.value = 'date';
     } else {
         mode.value = 'time';
-        updateTimePicker(true);
     }
 }
 
 function setCurrentTime(): void {
     dateTime.value = getLocalDatetimeFromUnixTime(getCurrentUnixTime());
-    timeValues.value = getTimeValues(dateTime.value, is24Hour, isMeridiemIndicatorFirst);
 
     if (mode.value === 'time') {
-        updateTimePicker(false);
+        scrollAllTimeSelectedItems();
     }
 }
 
@@ -147,43 +260,6 @@ function confirm(): void {
     emit('update:show', false);
 }
 
-function getTimePickerColumns(): Picker.ColumnParameters[] {
-    const ret: Picker.ColumnParameters[] = [];
-
-    if (!is24Hour && isMeridiemIndicatorFirst) {
-        ret.push(getAllMeridiemIndicators());
-    }
-
-    // Hours
-    ret.push({
-        values: generateAllHours()
-    });
-    // Divider
-    ret.push({
-        divider: true,
-        content: ':',
-    });
-    // Minutes
-    ret.push({
-        values: generateAllMinutesOrSeconds()
-    });
-    // Divider
-    ret.push({
-        divider: true,
-        content: ':',
-    });
-    // Seconds
-    ret.push({
-        values: generateAllMinutesOrSeconds()
-    });
-
-    if (!is24Hour && !isMeridiemIndicatorFirst) {
-        ret.push(getAllMeridiemIndicators());
-    }
-
-    return ret;
-}
-
 function getDisplayTimeValue(value: number): string {
     if (value < 10) {
         return `0${value}`;
@@ -192,44 +268,224 @@ function getDisplayTimeValue(value: number): string {
     }
 }
 
-function generateAllHours(): string[] {
-    const ret: string[] = [];
+function generateAllHours(count: number): TimePickerValue[] {
+    const ret: TimePickerValue[] = [];
     const startHour = is24Hour ? 0 : 1;
     const endHour = is24Hour ? 23 : 11;
 
-    if (!is24Hour) {
-        ret.push('12');
-    }
+    for (let i = 0; i < count; i++) {
+        if (!is24Hour) {
+            ret.push({
+                value: '12',
+                itemsIndex: i
+            });
+        }
 
-    for (let i = startHour; i <= endHour; i++) {
-        ret.push(getDisplayTimeValue(i));
-    }
-
-    return ret;
-}
-
-function generateAllMinutesOrSeconds(): string[] {
-    const ret: string[] = [];
-
-    for (let i = 0; i < 60; i++) {
-        ret.push(getDisplayTimeValue(i));
-    }
-
-    return ret;
-}
-
-function updateTimePicker(lazy: boolean): void {
-    if (lazy) {
-        nextTick(() => {
-            if (timePickerHolder) {
-                timePickerHolder.setValue(timeValues.value);
-            }
-        });
-    } else {
-        if (timePickerHolder) {
-            timePickerHolder.setValue(timeValues.value);
+        for (let j = startHour; j <= endHour; j++) {
+            ret.push({
+                value: getDisplayTimeValue(j),
+                itemsIndex: i
+            });
         }
     }
+
+    return ret;
+}
+
+function generateAllMinutesOrSeconds(count: number): TimePickerValue[] {
+    const ret: TimePickerValue[] = [];
+
+    for (let i = 0; i < count; i++) {
+        for (let j = 0; j < 60; j++) {
+            ret.push({
+                value: getDisplayTimeValue(j),
+                itemsIndex: i
+            });
+        }
+    }
+
+    return ret;
+}
+
+function getTimerPickerItemStyle(textualValue: string, textualCurrentValue: string, itemsIndex: number, values: TimePickerValue[]): string {
+    if (!timePickerContainerHeight.value || !timePickerItemHeight.value) {
+        return '';
+    }
+
+    const minValue = parseInt(values[0].value);
+    const maxValue = parseInt(values[values.length - 1].value);
+    const value = parseInt(textualValue, 10);
+    const currentValue = parseInt(textualCurrentValue, 10);
+    let valueDiff = value - currentValue;
+
+    if (Math.abs(valueDiff) >= 5) {
+        if (itemsIndex === 0 && maxValue - 5 < value && currentValue < minValue + 5) {
+            valueDiff = value - (maxValue + currentValue + 1);
+        } else if (itemsIndex === 2 && maxValue - 5 < currentValue && value < minValue + 5) {
+            valueDiff = (maxValue + value + 1) - currentValue;
+        }
+    }
+
+    let angle = -24 * valueDiff;
+
+    if (angle > 180) {
+        return '';
+    }
+    if (angle < -180) {
+        return '';
+    }
+
+    return `transform: translate3d(0, ${-valueDiff * timePickerItemHeight.value}px, -100px) rotateX(${angle}deg)`;
+}
+
+function initTimePickerStyle(): void {
+    const timePickerContainerElement = document.getElementById('time-picker-container');
+    const pickerItems = timePickerContainerElement?.querySelectorAll('.picker-item');
+    const firstPickerItem = pickerItems ? pickerItems[0] : null;
+
+    if (timePickerContainerElement) {
+        timePickerContainerHeight.value = timePickerContainerElement.offsetHeight as number;
+    }
+
+    if (firstPickerItem && 'offsetHeight' in firstPickerItem) {
+        timePickerItemHeight.value = firstPickerItem.offsetHeight as number;
+    }
+
+    if (timePickerContainerElement && firstPickerItem && 'offsetHeight' in firstPickerItem) {
+        timePickerContainerElement.style.setProperty('--f7-picker-scroll-padding', `${(timePickerContainerElement.offsetHeight - (firstPickerItem.offsetHeight as number)) / 2}px`);
+    }
+}
+
+function scrollAllTimeSelectedItems(): void {
+    scrollToSelectedItem('picker-items-hour', 'picker-hour', currentHour.value);
+    scrollToSelectedItem('picker-items-minute', 'picker-minute', currentMinute.value);
+    scrollToSelectedItem('picker-items-second', 'picker-second', currentSecond.value);
+    scrollToSelectedItem('picker-items-meridiem-indicator-first', 'picker-meridiem-indicator', currentMeridiemIndicator.value);
+    scrollToSelectedItem('picker-items-meridiem-indicator-last', 'picker-meridiem-indicator', currentMeridiemIndicator.value);
+}
+
+function scrollTimeSelectedItems(itemsClass: string, itemClass: string): void {
+    switch (resetTimePickerItemPositionItemClass) {
+        case 'picker-hour':
+            scrollToSelectedItem(itemsClass, itemClass, currentHour.value);
+            break;
+        case 'picker-minute':
+            scrollToSelectedItem(itemsClass, itemClass, currentMinute.value);
+            break;
+        case 'picker-second':
+            scrollToSelectedItem(itemsClass, itemClass, currentSecond.value);
+            break;
+    }
+}
+
+function scrollToSelectedItem(itemsClass: string, itemClass: string, value: string): void {
+    const itemsElement = document.querySelector(`.${itemsClass}`);
+    const itemElements = itemsElement?.querySelectorAll(`.${itemClass}`);
+
+    if (!itemsElement || !itemElements || !itemElements.length) {
+        return;
+    }
+
+    for (let i = 0; i < itemElements.length; i++) {
+        const itemElement = itemElements[i];
+
+        if ('offsetHeight' in itemsElement && 'offsetTop' in itemElement && 'offsetHeight' in itemElement
+            && (!itemElement.hasAttribute('data-items-index') || itemElement.getAttribute('data-items-index') === '1')
+            && itemElement.getAttribute('data-value') === value) {
+            itemsElement.scrollTop = (itemElement.offsetTop as number) - ((itemsElement.offsetHeight as number) / 2) + ((itemElement.offsetHeight as number) / 2);
+            break;
+        }
+    }
+}
+
+function onPickerColumnScroll(itemsClass: string, itemClass: string, scrollEnd: boolean): void {
+    const itemsElement = document.querySelector(`.${itemsClass}`);
+    const itemElements = itemsElement?.querySelectorAll(`.${itemClass}`);
+    const firstPickerElement = itemElements ? itemElements[0] : null;
+
+    if (!itemsElement || !itemElements || !itemElements.length || !firstPickerElement || !('offsetHeight' in firstPickerElement)) {
+        return;
+    }
+
+    const itemHeight = firstPickerElement.offsetHeight as number;
+    const scrollTop = itemsElement?.scrollTop || 0;
+    const index = Math.round(scrollTop / itemHeight);
+    const selectedItem = itemElements[index];
+
+    if (selectedItem) {
+        const value = selectedItem.getAttribute('data-value');
+        const itemsIndex = selectedItem.getAttribute('data-items-index');
+
+        if (value) {
+            switch (itemClass) {
+                case 'picker-hour':
+                    currentHour.value = value;
+                    break;
+                case 'picker-minute':
+                    currentMinute.value = value;
+                    break;
+                case 'picker-second':
+                    currentSecond.value = value;
+                    break;
+                case 'picker-meridiem-indicator':
+                    currentMeridiemIndicator.value = value;
+                    break;
+            }
+
+            if (itemsIndex === '0' || itemsIndex === '2') {
+                if (scrollEnd) {
+                    scrollToSelectedItem(itemsClass, itemClass, value);
+                } else {
+                    if (resetTimePickerItemPositionItemsClass && resetTimePickerItemPositionItemClass
+                        && resetTimePickerItemPositionItemsClass !== itemsClass && resetTimePickerItemPositionItemClass !== itemClass) {
+                        scrollTimeSelectedItems(resetTimePickerItemPositionItemsClass, resetTimePickerItemPositionItemClass);
+                        resetTimePickerItemPositionItemsClass = undefined;
+                        resetTimePickerItemPositionItemClass = undefined;
+                        resetTimePickerItemPositionItemsLastOffsetTop = undefined;
+                        resetTimePickerItemPositionCheckedFrames = undefined;
+                    }
+
+                    if (!resetTimePickerItemPositionCheckedFrames && window.requestAnimationFrame) {
+                        resetTimePickerItemPositionItemsClass = itemsClass;
+                        resetTimePickerItemPositionItemClass = itemClass;
+                        resetTimePickerItemPositionItemsLastOffsetTop = itemsElement.scrollTop;
+                        resetTimePickerItemPositionCheckedFrames = 1;
+                        window.requestAnimationFrame(delayCheckAndResetTimePickerItemPosition);
+                    }
+                }
+            }
+        }
+    }
+}
+
+function delayCheckAndResetTimePickerItemPosition(): void {
+    if (!resetTimePickerItemPositionItemsClass || !resetTimePickerItemPositionItemClass || !isDefined(resetTimePickerItemPositionItemsLastOffsetTop) || !isDefined(resetTimePickerItemPositionCheckedFrames)) {
+        return;
+    }
+
+    const itemsElement = document.querySelector(`.${resetTimePickerItemPositionItemsClass}`);
+
+    if (!itemsElement) {
+        return;
+    }
+
+    if (itemsElement.scrollTop === resetTimePickerItemPositionItemsLastOffsetTop) {
+        resetTimePickerItemPositionCheckedFrames++;
+    } else {
+        resetTimePickerItemPositionItemsLastOffsetTop = itemsElement.scrollTop;
+        resetTimePickerItemPositionCheckedFrames = 0;
+    }
+
+    if (resetTimePickerItemPositionCheckedFrames > 3) {
+        scrollTimeSelectedItems(resetTimePickerItemPositionItemsClass, resetTimePickerItemPositionItemClass);
+        resetTimePickerItemPositionItemsClass = undefined;
+        resetTimePickerItemPositionItemClass = undefined;
+        resetTimePickerItemPositionItemsLastOffsetTop = undefined;
+        resetTimePickerItemPositionCheckedFrames = undefined;
+        return;
+    }
+
+    window.requestAnimationFrame(delayCheckAndResetTimePickerItemPosition);
 }
 
 function onSheetOpen(): void {
@@ -239,20 +495,11 @@ function onSheetOpen(): void {
         dateTime.value = getLocalDatetimeFromUnixTime(props.modelValue);
     }
 
-    timeValues.value = getTimeValues(dateTime.value, is24Hour, isMeridiemIndicatorFirst);
-
-    if (!timePickerHolder) {
-        timePickerHolder = createInlinePicker('#time-picker-container', '#time-picker-input',
-            getTimePickerColumns(), timeValues.value, {
-                change(picker, values) {
-                    if (mode.value === 'time' && values) {
-                        timeValues.value = values as string[];
-                        dateTime.value = getCombinedDateAndTimeValues(dateTime.value, timeValues.value, is24Hour, isMeridiemIndicatorFirst);
-                    }
-                }
-            });
-    } else {
-        updateTimePicker(true);
+    if (mode.value === 'time') {
+        nextTick(() => {
+            initTimePickerStyle();
+            scrollAllTimeSelectedItems();
+        });
     }
 
     if (datetimepicker.value) {
@@ -264,10 +511,14 @@ function onSheetClosed(): void {
     emit('update:show', false);
 }
 
-onBeforeUnmount(() => {
-    if (timePickerHolder) {
-        timePickerHolder.destroy();
-        timePickerHolder = null;
+watch(mode, (newValue) => {
+    if (newValue === 'date' && datetimepicker.value) {
+        datetimepicker.value.switchView('calendar');
+    } else if (newValue === 'time') {
+        nextTick(() => {
+            initTimePickerStyle();
+            scrollAllTimeSelectedItems();
+        });
     }
 });
 </script>

src/core/datetime.ts

@@ -62,11 +62,6 @@ export interface PresetDateRange {
     readonly value: Date[];
 }
 
-export interface LocalizedMeridiemIndicator {
-    readonly values: string[];
-    readonly displayValues: string[];
-}
-
 export interface LocalizedDateTimeFormat extends TypeAndDisplayName {
     readonly type: number;
     readonly format: string;

src/lib/datetime.ts

@@ -920,47 +920,13 @@ export function getFullMonthDateRange(minTime: number, maxTime: number, firstDay
     return dateRange;
 }
 
-export function getTimeValues(date: Date, is24Hour: boolean, isMeridiemIndicatorFirst: boolean): string[] {
-    const hourMinuteSeconds = [
-        getTwoDigitsString(is24Hour ? date.getHours() : getHourIn12HourFormat(date.getHours())),
-        getTwoDigitsString(date.getMinutes()),
-        getTwoDigitsString(date.getSeconds())
-    ];
-
-    if (is24Hour) {
-        return hourMinuteSeconds;
-    } else if (/*!is24Hour && */isMeridiemIndicatorFirst) {
-        return [getAMOrPM(date.getHours())].concat(hourMinuteSeconds);
-    } else /* !is24Hour && !isMeridiemIndicatorFirst */ {
-        return hourMinuteSeconds.concat([getAMOrPM(date.getHours())]);
-    }
-}
-
-export function getCombinedDateAndTimeValues(date: Date, timeValues: string[], is24Hour: boolean, isMeridiemIndicatorFirst: boolean): Date {
+export function getCombinedDateAndTimeValues(date: Date, hour: string, minute: string, second: string, meridiemIndicator: string, is24Hour: boolean): Date {
     const newDateTime = new Date(date.valueOf());
-    let hours = 0;
-    let minutes = 0;
-    let seconds = 0;
-
-    if (is24Hour) {
-        hours = parseInt(timeValues[0]);
-        minutes = parseInt(timeValues[1]);
-        seconds = parseInt(timeValues[2]);
-    } else {
-        let meridiemIndicator;
-
-        if (/*!is24Hour && */isMeridiemIndicatorFirst) {
-            meridiemIndicator = timeValues[0];
-            hours = parseInt(timeValues[1]);
-            minutes = parseInt(timeValues[2]);
-            seconds = parseInt(timeValues[3]);
-        } else /* !is24Hour && !isMeridiemIndicatorFirst */ {
-            hours = parseInt(timeValues[0]);
-            minutes = parseInt(timeValues[1]);
-            seconds = parseInt(timeValues[2]);
-            meridiemIndicator = timeValues[3];
-        }
+    let hours = parseInt(hour);
+    let minutes = parseInt(minute);
+    let seconds = parseInt(second);
 
+    if (!is24Hour) {
         if (hours === 12) {
             hours = 0;
         }

src/locales/helpers.ts

@@ -2,14 +2,13 @@ import { useI18n as useVueI18n } from 'vue-i18n';
 import moment from 'moment-timezone';
 import 'moment-timezone/moment-timezone-utils';
 
-import type { PartialRecord, TypeAndName, TypeAndDisplayName, LocalizedSwitchOption } from '@/core/base.ts';
+import type { PartialRecord, NameValue, TypeAndName, TypeAndDisplayName, LocalizedSwitchOption } from '@/core/base.ts';
 
 import { type LanguageInfo, type LanguageOption, ALL_LANGUAGES, DEFAULT_LANGUAGE } from '@/locales/index.ts';
 
 import {
     type DateFormat,
     type TimeFormat,
-    type LocalizedMeridiemIndicator,
     type LocalizedDateTimeFormat,
     type LocalizedDateRange,
     type LocalizedRecentMonthDateRange,
@@ -756,22 +755,20 @@ export function useI18n() {
         return allCurrencies;
     }
 
-    function getAllMeridiemIndicators(): LocalizedMeridiemIndicator {
+    function getAllMeridiemIndicators(): NameValue[] {
         const allMeridiemIndicators = MeridiemIndicator.values();
-        const meridiemIndicatorNames = [];
         const localizedMeridiemIndicatorNames = [];
 
         for (let i = 0; i < allMeridiemIndicators.length; i++) {
             const indicator = allMeridiemIndicators[i];
 
-            meridiemIndicatorNames.push(indicator.name);
-            localizedMeridiemIndicatorNames.push(t(`datetime.${indicator.name}.content`));
+            localizedMeridiemIndicatorNames.push({
+                name: t(`datetime.${indicator.name}.content`),
+                value: indicator.name
+            });
         }
 
-        return {
-            values: meridiemIndicatorNames,
-            displayValues: localizedMeridiemIndicatorNames
-        };
+        return localizedMeridiemIndicatorNames;
     }
 
     function getAllLongMonthNames(): string[] {