fix the display format of the fiscal year start date not updated after changing the number system on user profile page

src/components/base/FiscalYearStartSelectionBase.ts

@@ -2,9 +2,14 @@ import { ref, computed } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
 
+import { NumeralSystem } from '@/core/numeral.ts';
 import type { MonthDay } from '@/core/datetime.ts';
 import { FiscalYearStart } from '@/core/fiscalyear.ts';
 
+import {
+    isDefined
+} from '@/lib/common.ts';
+
 import {
     getLocalDatetimeFromUnixTime,
     getThisYearFirstUnixTime,
@@ -16,6 +21,7 @@ export interface CommonFiscalYearStartSelectionProps {
     disabled?: boolean;
     readonly?: boolean;
     label?: string;
+    numeralSystem?: number;
 }
 
 export interface CommonFiscalYearStartSelectionEmits {
@@ -37,7 +43,7 @@ function getFiscalYearStartFromProps(props: CommonFiscalYearStartSelectionProps)
 }
 
 export function useFiscalYearStartSelectionBase(props: CommonFiscalYearStartSelectionProps) {
-    const { formatGregorianTextualMonthDayToGregorianLikeLongMonthDay } = useI18n();
+    const { getCurrentNumeralSystemType, formatGregorianTextualMonthDayToGregorianLikeLongMonthDay } = useI18n();
 
     const disabledDates = (date: Date) => {
         // Disable February 29 (leap day)
@@ -46,6 +52,14 @@ export function useFiscalYearStartSelectionBase(props: CommonFiscalYearStartSele
 
     const selectedFiscalYearStart = ref<number>(getFiscalYearStartFromProps(props));
 
+    const actualNumeralSystem = computed<NumeralSystem>(() => {
+        if (isDefined(props.numeralSystem)) {
+            return NumeralSystem.valueOf(props.numeralSystem) ?? NumeralSystem.Default;
+        } else {
+            return getCurrentNumeralSystemType();
+        }
+    });
+
     const selectedFiscalYearStartValue = computed<Date>({
         get: () => {
             const fiscalYearStart = FiscalYearStart.valueOf(selectedFiscalYearStart.value);
@@ -71,7 +85,7 @@ export function useFiscalYearStartSelectionBase(props: CommonFiscalYearStartSele
             fiscalYearStart = FiscalYearStart.Default;
         }
 
-        return formatGregorianTextualMonthDayToGregorianLikeLongMonthDay(fiscalYearStart.toMonthDashDayString());
+        return formatGregorianTextualMonthDayToGregorianLikeLongMonthDay(fiscalYearStart.toMonthDashDayString(), actualNumeralSystem.value);
     });
 
     const allowedMinDate = computed<Date>(() => getLocalDatetimeFromUnixTime(getThisYearFirstUnixTime()));

src/components/common/DateTimePicker.vue

@@ -55,8 +55,9 @@ import { useI18n } from '@/locales/helpers.ts';
 import { useUserStore } from '@/stores/user.ts';
 
 import type { CalendarType } from '@/core/calendar.ts';
+import { NumeralSystem } from '@/core/numeral.ts';
 import type { PresetDateRange, WeekDayValue } from '@/core/datetime.ts';
-import { isArray, arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
+import { isDefined, isArray, arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
 import { getAllowedYearRange, getYearMonthDayDateTime } from '@/lib/datetime.ts';
 
 type VueDatePickerType = InstanceType<typeof VueDatePicker>;
@@ -66,6 +67,7 @@ const props = defineProps<{
     modelValue: SupportedModelValue;
     datetimePickerClass?: string;
     isDarkMode: boolean;
+    numeralSystem?: number;
     enableTimePicker: boolean;
     disableYearSelect?: boolean;
     vertical?: boolean;
@@ -86,6 +88,7 @@ const {
     tt,
     getAllMinWeekdayNames,
     getCurrentCalendarDisplayType,
+    getCurrentNumeralSystemType,
     isLongDateMonthAfterYear,
     isLongTime24HourFormat,
     getCalendarDisplayShortYearFromUnixTime,
@@ -106,6 +109,14 @@ const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
 const is24Hour = computed<boolean>(() => isLongTime24HourFormat());
 const alternateCalendarType = computed<CalendarType | undefined>(() => getCurrentCalendarDisplayType().secondaryCalendarType);
 
+const actualNumeralSystem = computed<NumeralSystem>(() => {
+    if (isDefined(props.numeralSystem)) {
+        return NumeralSystem.valueOf(props.numeralSystem) ?? NumeralSystem.Default;
+    } else {
+        return getCurrentNumeralSystemType();
+    }
+});
+
 const dateTime = computed<SupportedModelValue>({
     get: () => props.modelValue,
     set: (value: SupportedModelValue) => emit('update:modelValue', value)
@@ -130,21 +141,21 @@ function switchView(viewType: MenuView): void {
 }
 
 function getDisplayYear(year: number): string {
-    return getCalendarDisplayShortYearFromUnixTime(getYearMonthDayDateTime(year, 1, 1).getUnixTime());
+    return getCalendarDisplayShortYearFromUnixTime(getYearMonthDayDateTime(year, 1, 1).getUnixTime(), actualNumeralSystem.value);
 }
 
 function getDisplayMonth(month: number): string {
     if (isArray(dateTime.value)) {
-        return getCalendarDisplayShortMonthFromUnixTime(getYearMonthDayDateTime(dateTime.value[0].getFullYear(), month + 1, 1).getUnixTime());
+        return getCalendarDisplayShortMonthFromUnixTime(getYearMonthDayDateTime(dateTime.value[0].getFullYear(), month + 1, 1).getUnixTime(), actualNumeralSystem.value);
     } else if (dateTime.value) {
-        return getCalendarDisplayShortMonthFromUnixTime(getYearMonthDayDateTime(dateTime.value.getFullYear(), month + 1, 1).getUnixTime());
+        return getCalendarDisplayShortMonthFromUnixTime(getYearMonthDayDateTime(dateTime.value.getFullYear(), month + 1, 1).getUnixTime(), actualNumeralSystem.value);
     } else {
-        return getCalendarDisplayShortMonthFromUnixTime(getYearMonthDayDateTime(new Date().getFullYear(), month + 1, 1).getUnixTime());
+        return getCalendarDisplayShortMonthFromUnixTime(getYearMonthDayDateTime(new Date().getFullYear(), month + 1, 1).getUnixTime(), actualNumeralSystem.value);
     }
 }
 
 function getDisplayDay(date: Date): string {
-    return getCalendarDisplayDayOfMonthFromUnixTime(getYearMonthDayDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate()).getUnixTime());
+    return getCalendarDisplayDayOfMonthFromUnixTime(getYearMonthDayDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate()).getUnixTime(), actualNumeralSystem.value);
 }
 
 defineExpose({

src/components/desktop/FiscalYearStartSelect.vue

@@ -13,6 +13,7 @@
 
         <template #no-data>
             <date-time-picker :is-dark-mode="isDarkMode"
+                              :numeral-system="numeralSystem"
                               :vertical="true"
                               :enable-time-picker="false"
                               :disable-year-select="true"

src/components/mobile/FiscalYearStartSelectionSheet.vue

@@ -14,6 +14,7 @@
             <div class="block block-outline no-margin no-padding">
                 <date-time-picker datetime-picker-class="justify-content-center"
                                   :is-dark-mode="isDarkMode"
+                                  :numeral-system="numeralSystem"
                                   :enable-time-picker="false"
                                   :disable-year-select="true"
                                   :no-swipe-and-scroll="true"