fix cannot selecting time when the number system was not Arabic numerals
This commit is contained in:
@@ -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
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user