diff --git a/src/components/desktop/DateTimeSelect.vue b/src/components/desktop/DateTimeSelect.vue index 3273b758..72a074d6 100644 --- a/src/components/desktop/DateTimeSelect.vue +++ b/src/components/desktop/DateTimeSelect.vue @@ -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('hourInput'); const minuteInput = useTemplateRef('minuteInput'); const secondInput = useTemplateRef('secondInput'); +const isDarkMode = computed(() => theme.global.name.value === ThemeType.Dark); +const numeralSystem = computed(() => getCurrentNumeralSystemType()); + const dateTime = computed({ get: () => { return getLocalDatetimeFromUnixTime(props.modelValue); @@ -143,6 +151,8 @@ const dateTime = computed({ } }); +const displayTime = computed(() => formatUnixTimeToLongDateTime(getActualUnixTimeForStore(getUnixTimeFromLocalDatetime(dateTime.value), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes()))); + const hourItems = computed(() => generateAllHours(1, isHourTwoDigits.value)); const minuteItems = computed(() => generateAllMinutesOrSeconds(1, isMinuteTwoDigits.value)); const secondItems = computed(() => generateAllMinutesOrSeconds(1, isSecondTwoDigits.value)); @@ -156,7 +166,7 @@ const currentMeridiemIndicator = computed({ 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({ @@ -164,13 +174,13 @@ const currentHour = computed({ 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({ @@ -178,13 +188,13 @@ const currentMinute = computed({ 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({ @@ -192,19 +202,16 @@ const currentSecond = computed({ 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(() => theme.global.name.value === ThemeType.Dark); -const displayTime = computed(() => 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; } diff --git a/src/components/mobile/DateTimeSelectionSheet.vue b/src/components/mobile/DateTimeSelectionSheet.vue index ff9f4db3..3517ad2c 100644 --- a/src/components/mobile/DateTimeSelectionSheet.vue +++ b/src/components/mobile/DateTimeSelectionSheet.vue @@ -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(getLocalDatetimeFromUnixTime(props.modelValue || getC const timePickerContainerHeight = ref(undefined); const timePickerItemHeight = ref(undefined); +const isDarkMode = computed(() => environmentsStore.framework7DarkMode || false); +const numeralSystem = computed(() => getCurrentNumeralSystemType()); + +const displayTime = computed(() => formatUnixTimeToLongDateTime(getActualUnixTimeForStore(getUnixTimeFromLocalDatetime(dateTime.value), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes()))); +const switchButtonTitle = computed(() => mode.value === 'time' ? 'Date' : 'Time'); + const hourItems = computed(() => generateAllHours(3, isHourTwoDigits.value)); const minuteItems = computed(() => generateAllMinutesOrSeconds(3, isMinuteTwoDigits.value)); const secondItems = computed(() => generateAllMinutesOrSeconds(3, isSecondTwoDigits.value)); @@ -174,7 +186,7 @@ const currentMeridiemIndicator = computed({ 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({ @@ -182,7 +194,7 @@ const currentHour = computed({ 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({ @@ -190,7 +202,7 @@ const currentMinute = computed({ 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({ @@ -198,14 +210,10 @@ const currentSecond = computed({ 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(() => environmentsStore.framework7DarkMode || false); -const displayTime = computed(() => formatUnixTimeToLongDateTime(getActualUnixTimeForStore(getUnixTimeFromLocalDatetime(dateTime.value), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes()))); -const switchButtonTitle = computed(() => mode.value === 'time' ? 'Date' : 'Time'); - function switchMode(): void { if (mode.value === 'time') { mode.value = 'date'; diff --git a/src/lib/datetime.ts b/src/lib/datetime.ts index c8555df1..fea4082f 100644 --- a/src/lib/datetime.ts +++ b/src/lib/datetime.ts @@ -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) {