fix cannot selecting time when the number system was not Arabic numerals

This commit is contained in:
MaysWind
2025-08-29 00:53:23 +08:00
parent b79ffafaee
commit e85a4701ed
3 changed files with 40 additions and 25 deletions
+19 -12
View File
@@ -84,6 +84,7 @@ import { useI18n } from '@/locales/helpers.ts';
import { type TimePickerValue, useDateTimeSelectionBase } from '@/components/base/DateTimeSelectionBase.ts';
import { ThemeType } from '@/core/theme.ts';
import { NumeralSystem } from '@/core/numeral.ts';
import { MeridiemIndicator } from '@/core/datetime.ts';
import {
getHourIn12HourFormat,
@@ -110,7 +111,11 @@ const emit = defineEmits<{
}>();
const theme = useTheme();
const { tt, formatUnixTimeToLongDateTime } = useI18n();
const {
tt,
getCurrentNumeralSystemType,
formatUnixTimeToLongDateTime
} = useI18n();
const {
is24Hour,
@@ -127,6 +132,9 @@ const hourInput = useTemplateRef<VAutocomplete>('hourInput');
const minuteInput = useTemplateRef<VAutocomplete>('minuteInput');
const secondInput = useTemplateRef<VAutocomplete>('secondInput');
const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
const numeralSystem = computed<NumeralSystem>(() => getCurrentNumeralSystemType());
const dateTime = computed<Date>({
get: () => {
return getLocalDatetimeFromUnixTime(props.modelValue);
@@ -143,6 +151,8 @@ const dateTime = computed<Date>({
}
});
const displayTime = computed<string>(() => formatUnixTimeToLongDateTime(getActualUnixTimeForStore(getUnixTimeFromLocalDatetime(dateTime.value), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes())));
const hourItems = computed<TimePickerValue[]>(() => generateAllHours(1, isHourTwoDigits.value));
const minuteItems = computed<TimePickerValue[]>(() => generateAllMinutesOrSeconds(1, isMinuteTwoDigits.value));
const secondItems = computed<TimePickerValue[]>(() => generateAllMinutesOrSeconds(1, isSecondTwoDigits.value));
@@ -156,7 +166,7 @@ const currentMeridiemIndicator = computed<string>({
return;
}
dateTime.value = getCombinedDateAndTimeValues(dateTime.value, currentHour.value, currentMinute.value, currentSecond.value, value, is24Hour.value);
dateTime.value = getCombinedDateAndTimeValues(dateTime.value, numeralSystem.value, currentHour.value, currentMinute.value, currentSecond.value, value, is24Hour.value);
}
});
const currentHour = computed<string>({
@@ -164,13 +174,13 @@ const currentHour = computed<string>({
return getDisplayTimeValue(is24Hour.value ? dateTime.value.getHours() : getHourIn12HourFormat(dateTime.value.getHours()), isHourTwoDigits.value);
},
set: (value: string) => {
const hour = parseInt(value);
const hour = numeralSystem.value.parseInt(value);
if (isNaN(hour) || hour < 0 || (is24Hour.value ? hour > 23 : hour > 12)) {
return;
}
dateTime.value = getCombinedDateAndTimeValues(dateTime.value, value, currentMinute.value, currentSecond.value, currentMeridiemIndicator.value, is24Hour.value);
dateTime.value = getCombinedDateAndTimeValues(dateTime.value, numeralSystem.value, value, currentMinute.value, currentSecond.value, currentMeridiemIndicator.value, is24Hour.value);
}
});
const currentMinute = computed<string>({
@@ -178,13 +188,13 @@ const currentMinute = computed<string>({
return getDisplayTimeValue(dateTime.value.getMinutes(), isMinuteTwoDigits.value);
},
set: (value: string) => {
const minute = parseInt(value);
const minute = numeralSystem.value.parseInt(value);
if (isNaN(minute) || minute < 0 || minute > 59) {
return;
}
dateTime.value = getCombinedDateAndTimeValues(dateTime.value, currentHour.value, value, currentSecond.value, currentMeridiemIndicator.value, is24Hour.value);
dateTime.value = getCombinedDateAndTimeValues(dateTime.value, numeralSystem.value, currentHour.value, value, currentSecond.value, currentMeridiemIndicator.value, is24Hour.value);
}
});
const currentSecond = computed<string>({
@@ -192,19 +202,16 @@ const currentSecond = computed<string>({
return getDisplayTimeValue(dateTime.value.getSeconds(), isSecondTwoDigits.value);
},
set: (value: string) => {
const second = parseInt(value);
const second = numeralSystem.value.parseInt(value);
if (isNaN(second) || second < 0 || second > 59) {
return;
}
dateTime.value = getCombinedDateAndTimeValues(dateTime.value, currentHour.value, currentMinute.value, value, currentMeridiemIndicator.value, is24Hour.value);
dateTime.value = getCombinedDateAndTimeValues(dateTime.value, numeralSystem.value, currentHour.value, currentMinute.value, value, currentMeridiemIndicator.value, is24Hour.value);
}
});
const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
const displayTime = computed<string>(() => formatUnixTimeToLongDateTime(getActualUnixTimeForStore(getUnixTimeFromLocalDatetime(dateTime.value), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes())));
function toggleMeridiemIndicator(): void {
if (currentMeridiemIndicator.value === MeridiemIndicator.AM.name) {
currentMeridiemIndicator.value = MeridiemIndicator.PM.name;
@@ -229,7 +236,7 @@ function onKeyDown(type: string, e: KeyboardEvent): void {
return;
}
if (e.key.length === 1 && '0' <= e.key && e.key <= '9') {
if (e.key.length === 1 && numeralSystem.value.isDigit(e.key)) {
return;
}
@@ -110,6 +110,8 @@ import { type TimePickerValue, useDateTimeSelectionBase } from '@/components/bas
import { useEnvironmentsStore } from '@/stores/environment.ts';
import { NumeralSystem } from '@/core/numeral.ts';
import { isDefined } from '@/lib/common.ts';
import {
getHourIn12HourFormat,
@@ -136,7 +138,11 @@ const emit = defineEmits<{
(e: 'update:show', value: boolean): void;
}>();
const { tt, formatUnixTimeToLongDateTime } = useI18n();
const {
tt,
getCurrentNumeralSystemType,
formatUnixTimeToLongDateTime
} = useI18n();
const { showToast } = useI18nUIComponents();
const {
@@ -165,6 +171,12 @@ const dateTime = ref<Date>(getLocalDatetimeFromUnixTime(props.modelValue || getC
const timePickerContainerHeight = ref<number | undefined>(undefined);
const timePickerItemHeight = ref<number | undefined>(undefined);
const isDarkMode = computed<boolean>(() => environmentsStore.framework7DarkMode || false);
const numeralSystem = computed<NumeralSystem>(() => getCurrentNumeralSystemType());
const displayTime = computed<string>(() => formatUnixTimeToLongDateTime(getActualUnixTimeForStore(getUnixTimeFromLocalDatetime(dateTime.value), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes())));
const switchButtonTitle = computed<string>(() => mode.value === 'time' ? 'Date' : 'Time');
const hourItems = computed<TimePickerValue[]>(() => generateAllHours(3, isHourTwoDigits.value));
const minuteItems = computed<TimePickerValue[]>(() => generateAllMinutesOrSeconds(3, isMinuteTwoDigits.value));
const secondItems = computed<TimePickerValue[]>(() => generateAllMinutesOrSeconds(3, isSecondTwoDigits.value));
@@ -174,7 +186,7 @@ const currentMeridiemIndicator = computed<string>({
return getAMOrPM(dateTime.value.getHours())
},
set: (value: string) => {
dateTime.value = getCombinedDateAndTimeValues(dateTime.value, currentHour.value, currentMinute.value, currentSecond.value, value, is24Hour.value);
dateTime.value = getCombinedDateAndTimeValues(dateTime.value, numeralSystem.value, currentHour.value, currentMinute.value, currentSecond.value, value, is24Hour.value);
}
});
const currentHour = computed<string>({
@@ -182,7 +194,7 @@ const currentHour = computed<string>({
return getDisplayTimeValue(is24Hour.value ? dateTime.value.getHours() : getHourIn12HourFormat(dateTime.value.getHours()), isHourTwoDigits.value);
},
set: (value: string) => {
dateTime.value = getCombinedDateAndTimeValues(dateTime.value, value, currentMinute.value, currentSecond.value, currentMeridiemIndicator.value, is24Hour.value);
dateTime.value = getCombinedDateAndTimeValues(dateTime.value, numeralSystem.value, value, currentMinute.value, currentSecond.value, currentMeridiemIndicator.value, is24Hour.value);
}
});
const currentMinute = computed<string>({
@@ -190,7 +202,7 @@ const currentMinute = computed<string>({
return getDisplayTimeValue(dateTime.value.getMinutes(), isMinuteTwoDigits.value);
},
set: (value: string) => {
dateTime.value = getCombinedDateAndTimeValues(dateTime.value, currentHour.value, value, currentSecond.value, currentMeridiemIndicator.value, is24Hour.value);
dateTime.value = getCombinedDateAndTimeValues(dateTime.value, numeralSystem.value, currentHour.value, value, currentSecond.value, currentMeridiemIndicator.value, is24Hour.value);
}
});
const currentSecond = computed<string>({
@@ -198,14 +210,10 @@ const currentSecond = computed<string>({
return getDisplayTimeValue(dateTime.value.getSeconds(), isSecondTwoDigits.value);
},
set: (value: string) => {
dateTime.value = getCombinedDateAndTimeValues(dateTime.value, currentHour.value, currentMinute.value, value, currentMeridiemIndicator.value, is24Hour.value);
dateTime.value = getCombinedDateAndTimeValues(dateTime.value, numeralSystem.value, currentHour.value, currentMinute.value, value, currentMeridiemIndicator.value, is24Hour.value);
}
});
const isDarkMode = computed<boolean>(() => environmentsStore.framework7DarkMode || false);
const displayTime = computed<string>(() => formatUnixTimeToLongDateTime(getActualUnixTimeForStore(getUnixTimeFromLocalDatetime(dateTime.value), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes())));
const switchButtonTitle = computed<string>(() => mode.value === 'time' ? 'Date' : 'Time');
function switchMode(): void {
if (mode.value === 'time') {
mode.value = 'date';
+4 -4
View File
@@ -1253,11 +1253,11 @@ export function getFullMonthDateRange(minTime: number, maxTime: number, firstDay
return dateRange;
}
export function getCombinedDateAndTimeValues(date: Date, hour: string, minute: string, second: string, meridiemIndicator: string, is24Hour: boolean): Date {
export function getCombinedDateAndTimeValues(date: Date, numeralSystem: NumeralSystem, hour: string, minute: string, second: string, meridiemIndicator: string, is24Hour: boolean): Date {
const newDateTime = new Date(date.valueOf());
let hours = parseInt(hour);
const minutes = parseInt(minute);
const seconds = parseInt(second);
let hours = numeralSystem.parseInt(hour);
const minutes = numeralSystem.parseInt(minute);
const seconds = numeralSystem.parseInt(second);
if (!is24Hour) {
if (hours === 12) {