add explicit type for string-based datetimes, replacing third-party datetime type with internal DateTime type

src/components/base/AccountBalanceTrendsChartBase.ts

@@ -17,7 +17,7 @@ import type { TransactionReconciliationStatementResponseItem } from '@/models/tr
 import { isDefined, isArray } from '@/lib/common.ts';
 import { sumAmounts } from '@/lib/numeral.ts';
 import {
-    getYearAndMonthFromUnixTime,
+    getGregorianCalendarYearAndMonthFromUnixTime,
     getYearFirstUnixTimeBySpecifiedUnixTime,
     getQuarterFirstUnixTimeBySpecifiedUnixTime,
     getMonthFirstUnixTimeBySpecifiedUnixTime,
@@ -99,8 +99,8 @@ export function useAccountBalanceTrendsChartBase(props: CommonAccountBalanceTren
         if (!isDefined(props.dateAggregationType)) {
             return getAllDaysStartAndEndUnixTimes(dataDateRange.value.minUnixTime, dataDateRange.value.maxUnixTime);
         } else {
-            const startYearMonth = getYearAndMonthFromUnixTime(dataDateRange.value.minUnixTime);
-            const endYearMonth = getYearAndMonthFromUnixTime(dataDateRange.value.maxUnixTime);
+            const startYearMonth = getGregorianCalendarYearAndMonthFromUnixTime(dataDateRange.value.minUnixTime);
+            const endYearMonth = getGregorianCalendarYearAndMonthFromUnixTime(dataDateRange.value.maxUnixTime);
             return getAllDateRangesByYearMonthRange(startYearMonth, endYearMonth, props.fiscalYearStart, props.dateAggregationType);
         }
     });

src/components/base/DateRangeSelectionBase.ts

@@ -4,9 +4,9 @@ import { type TimeRangeAndDateType, type PresetDateRange, type UnixTimeRange, ty
 import { arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
 import {
     getCurrentUnixTime,
-    getCurrentYear,
-    getUnixTime,
+    getAllowedYearRange,
     getLocalDatetimeFromUnixTime,
+    getUnixTimeFromLocalDatetime,
     getTodayFirstUnixTime,
     getDummyUnixTimeForLocalUsage,
     getActualUnixTimeForStore,
@@ -50,10 +50,7 @@ export function useDateRangeSelectionBase(props: CommonDateRangeSelectionProps)
     const userStore = useUserStore();
     const { minDate, maxDate } = getDateRangeFromProps(props);
 
-    const yearRange = ref<number[]>([
-        2000,
-        getCurrentYear() + 1
-    ]);
+    const yearRange = ref<number[]>(getAllowedYearRange());
 
     const dateRange = ref<Date[]>([
         getLocalDatetimeFromUnixTime(getDummyUnixTimeForLocalUsage(minDate, getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes())),
@@ -65,11 +62,11 @@ export function useDateRangeSelectionBase(props: CommonDateRangeSelectionProps)
     const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
     const is24Hour = computed<boolean>(() => isLongTime24HourFormat());
     const beginDateTime = computed<string>(() => {
-        const actualBeginUnixTime = getActualUnixTimeForStore(getUnixTime(dateRange.value[0]), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes());
+        const actualBeginUnixTime = getActualUnixTimeForStore(getUnixTimeFromLocalDatetime(dateRange.value[0]), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes());
         return formatUnixTimeToLongDateTime(actualBeginUnixTime);
     });
     const endDateTime = computed<string>(() => {
-        const actualEndUnixTime = getActualUnixTimeForStore(getUnixTime(dateRange.value[1]), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes());
+        const actualEndUnixTime = getActualUnixTimeForStore(getUnixTimeFromLocalDatetime(dateRange.value[1]), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes());
         return formatUnixTimeToLongDateTime(actualEndUnixTime);
     });
     const presetRanges = computed<PresetDateRange[]>(() => {
@@ -108,8 +105,8 @@ export function useDateRangeSelectionBase(props: CommonDateRangeSelectionProps)
         const currentMinDate = dateRange.value[0];
         const currentMaxDate = dateRange.value[1];
 
-        let minUnixTime = getUnixTime(currentMinDate);
-        let maxUnixTime = getUnixTime(currentMaxDate);
+        let minUnixTime = getUnixTimeFromLocalDatetime(currentMinDate);
+        let maxUnixTime = getUnixTimeFromLocalDatetime(currentMaxDate);
 
         if (minUnixTime < 0 || maxUnixTime < 0) {
             throw new Error('Date is too early');

src/components/base/DateTimeSelectionBase.ts

@@ -7,7 +7,7 @@ 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 { getCurrentYear } from '@/lib/datetime.ts';
+import { getAllowedYearRange } from '@/lib/datetime.ts';
 
 export interface TimePickerValue {
     value: string;
@@ -34,10 +34,7 @@ export function useDateTimeSelectionBase() {
     const isSecondTwoDigits = ref<boolean>(isLongTimeSecondTwoDigits());
     const isMeridiemIndicatorFirst = ref<boolean>(isLongTimeMeridiemIndicatorFirst() || false);
 
-    const yearRange = ref<number[]>([
-        2000,
-        getCurrentYear() + 1
-    ]);
+    const yearRange = ref<number[]>(getAllowedYearRange());
 
     const meridiemItems = computed<NameValue[]>(() => getAllMeridiemIndicators());
 

src/components/base/FiscalYearStartSelectionBase.ts

@@ -41,7 +41,7 @@ function getFiscalYearStartFromProps(props: CommonFiscalYearStartSelectionProps)
 export function useFiscalYearStartSelectionBase(props: CommonFiscalYearStartSelectionProps) {
     const {
         getAllMinWeekdayNames,
-        formatMonthDayToLongDay
+        formatGregorianCalendarMonthDashDayToLongMonthDay
     } = useI18n();
 
     const userStore = useUserStore();
@@ -81,7 +81,7 @@ export function useFiscalYearStartSelectionBase(props: CommonFiscalYearStartSele
             fiscalYearStart = FiscalYearStart.Default;
         }
 
-        return formatMonthDayToLongDay(fiscalYearStart.toMonthDashDayString());
+        return formatGregorianCalendarMonthDashDayToLongMonthDay(fiscalYearStart.toMonthDashDayString());
     });
 
     const allowedMinDate = computed<Date>(() => getLocalDatetimeFromUnixTime(getThisYearFirstUnixTime()));

src/components/base/MonthRangeSelectionBase.ts

@@ -1,13 +1,13 @@
 import { ref, computed } from 'vue';
 
-import type { Year0BasedMonth } from '@/core/datetime.ts';
+import type { TextualYearMonth, Year0BasedMonth } from '@/core/datetime.ts';
 
 import {
     getYear0BasedMonthObjectFromUnixTime,
     getYear0BasedMonthObjectFromString,
     getYearMonthStringFromYear0BasedMonthObject,
     getCurrentUnixTime,
-    getCurrentYear,
+    getAllowedYearRange,
     getThisYearFirstUnixTime,
     getYearMonthFirstUnixTime,
     getYearMonthLastUnixTime
@@ -21,8 +21,8 @@ export interface MonthSelectionValue {
 }
 
 export interface CommonMonthRangeSelectionProps {
-    minTime?: string;
-    maxTime?: string;
+    minTime?: TextualYearMonth;
+    maxTime?: TextualYearMonth;
     title?: string;
     hint?: string;
     show: boolean;
@@ -64,11 +64,7 @@ export function useMonthRangeSelectionBase(props: CommonMonthRangeSelectionProps
     const { formatUnixTimeToLongYearMonth, isLongDateMonthAfterYear } = useI18n();
     const { minDate, maxDate } = getMonthRangeFromProps(props);
 
-    const yearRange = ref<number[]>([
-        2000,
-        getCurrentYear() + 1
-    ]);
-
+    const yearRange = ref<number[]>(getAllowedYearRange());
     const dateRange = ref<MonthSelectionValue[]>([
         minDate,
         maxDate
@@ -84,7 +80,7 @@ export function useMonthRangeSelectionBase(props: CommonMonthRangeSelectionProps
         month0base: dateRange.value[1].month
     })));
 
-    function getMonthSelectionValue(yearMonth: string): MonthSelectionValue | null {
+    function getMonthSelectionValue(yearMonth: TextualYearMonth): MonthSelectionValue | null {
         const yearMonthObj = getYear0BasedMonthObjectFromString(yearMonth);
 
         if (!yearMonthObj) {
@@ -97,7 +93,7 @@ export function useMonthRangeSelectionBase(props: CommonMonthRangeSelectionProps
         };
     }
 
-    function getFinalMonthRange(): { minYearMonth: string, maxYearMonth: string } | null {
+    function getFinalMonthRange(): { minYearMonth: TextualYearMonth | '', maxYearMonth: TextualYearMonth | '' } | null {
         if (!dateRange.value[0] || !dateRange.value[1]) {
             return null;
         }

src/components/base/MonthSelectionBase.ts

@@ -4,9 +4,7 @@ import type { Year0BasedMonth } from '@/core/datetime.ts';
 
 import {
     getYear0BasedMonthObjectFromUnixTime,
-    getYear0BasedMonthObjectFromString,
-    getYearMonthStringFromYear0BasedMonthObject,
-    getCurrentYear,
+    getAllowedYearRange,
     getThisMonthFirstUnixTime
 } from '@/lib/datetime.ts';
 
@@ -18,7 +16,7 @@ export interface MonthSelectionValue {
 }
 
 export interface CommonMonthSelectionProps {
-    modelValue?: string;
+    modelValue?: Year0BasedMonth;
     title?: string;
     hint?: string;
     show: boolean;
@@ -28,11 +26,7 @@ function getYearMonthValueFromProps(props: CommonMonthSelectionProps): MonthSele
     let value: Year0BasedMonth = getYear0BasedMonthObjectFromUnixTime(getThisMonthFirstUnixTime());
 
     if (props.modelValue) {
-        const yearMonth = getYear0BasedMonthObjectFromString(props.modelValue);
-
-        if (yearMonth) {
-            value = yearMonth;
-        }
+        value = props.modelValue;
     }
 
     return {
@@ -44,29 +38,23 @@ function getYearMonthValueFromProps(props: CommonMonthSelectionProps): MonthSele
 export function useMonthSelectionBase(props: CommonMonthSelectionProps) {
     const { isLongDateMonthAfterYear } = useI18n();
 
-    const yearRange = ref<number[]>([
-        2000,
-        getCurrentYear() + 1
-    ]);
-
+    const yearRange = ref<number[]>(getAllowedYearRange());
     const monthValue = ref<MonthSelectionValue>(getYearMonthValueFromProps(props));
 
     const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
 
-    function getMonthSelectionValue(yearMonth: string): MonthSelectionValue | null {
-        const yearMonthObj = getYear0BasedMonthObjectFromString(yearMonth);
-
-        if (!yearMonthObj) {
+    function getMonthSelectionValue(yearMonth: Year0BasedMonth): MonthSelectionValue | null {
+        if (!yearMonth) {
             return null;
         }
 
         return {
-            year: yearMonthObj.year,
-            month: yearMonthObj.month0base
+            year: yearMonth.year,
+            month: yearMonth.month0base
         };
     }
 
-    function getTextualYearMonth(): string | null {
+    function getYear0BasedMonth(): Year0BasedMonth | null {
         if (!monthValue.value) {
             return null;
         }
@@ -75,10 +63,10 @@ export function useMonthSelectionBase(props: CommonMonthSelectionProps) {
             throw new Error('Date is too early');
         }
 
-        return getYearMonthStringFromYear0BasedMonthObject({
+        return {
             year: monthValue.value.year,
             month0base: monthValue.value.month
-        });
+        };
     }
 
     return {
@@ -89,6 +77,6 @@ export function useMonthSelectionBase(props: CommonMonthSelectionProps) {
         isYearFirst,
         // functions
         getMonthSelectionValue,
-        getTextualYearMonth
+        getYear0BasedMonth
     };
 }

src/components/base/MonthlyTrendsChartBase.ts

@@ -3,6 +3,7 @@ import { computed } from 'vue';
 import { useI18n } from '@/locales/helpers.ts';
 
 import type {
+    TextualYearMonth,
     Year1BasedMonth,
     TimeRangeAndDateType,
     YearUnixTime,
@@ -18,8 +19,8 @@ import { getAllDateRangesFromItems } from '@/lib/statistics.ts';
 
 export interface CommonMonthlyTrendsChartProps<T extends Year1BasedMonth> {
     items: YearMonthItems<T>[];
-    startYearMonth: string;
-    endYearMonth: string;
+    startYearMonth: TextualYearMonth | '';
+    endYearMonth: TextualYearMonth | '';
     fiscalYearStart: number;
     sortingType: number;
     dateAggregationType: number;

src/components/desktop/DateSelect.vue

@@ -44,13 +44,13 @@ import { useI18n } from '@/locales/helpers.ts';
 
 import { useUserStore } from '@/stores/user.ts';
 
-import { type WeekDayValue } from '@/core/datetime.ts';
+import { type TextualYearMonthDay, type WeekDayValue } from '@/core/datetime.ts';
 import { ThemeType } from '@/core/theme.ts';
 import { arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
-import { getCurrentYear } from '@/lib/datetime.ts';
+import { getAllowedYearRange } from '@/lib/datetime.ts';
 
 const props = defineProps<{
-    modelValue?: string;
+    modelValue?: TextualYearMonthDay;
     disabled?: boolean;
     readonly?: boolean;
     clearable?: boolean;
@@ -59,22 +59,19 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: 'update:modelValue', value: string): void;
+    (e: 'update:modelValue', value: TextualYearMonthDay): void;
 }>();
 
 const theme = useTheme();
-const { tt, getAllMinWeekdayNames, getMonthShortName, formatDateToLongDate, isLongDateMonthAfterYear } = useI18n();
+const { tt, getAllMinWeekdayNames, getMonthShortName, formatGregorianCalendarYearDashMonthDashDayToLongDate, isLongDateMonthAfterYear } = useI18n();
 
 const userStore = useUserStore();
 
-const yearRange = ref<number[]>([
-    2000,
-    getCurrentYear() + 1
-]);
+const yearRange = ref<number[]>(getAllowedYearRange());
 
 const dateTime = computed<string>({
     get: () => props.modelValue ?? '',
-    set: (value: string) => emit('update:modelValue', value)
+    set: (value: string) => emit('update:modelValue', value as TextualYearMonthDay)
 });
 
 const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
@@ -83,7 +80,7 @@ const dayNames = computed<string[]>(() => arrangeArrayWithNewStartIndex(getAllMi
 const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
 const displayTime = computed<string>(() => {
     if (props.modelValue) {
-        return formatDateToLongDate(props.modelValue);
+        return formatGregorianCalendarYearDashMonthDashDayToLongDate(props.modelValue);
     } else if (props.noDataText) {
         return props.noDataText;
     } else {

src/components/desktop/DateTimeSelect.vue

@@ -105,7 +105,7 @@ import {
     getBrowserTimezoneOffsetMinutes,
     getLocalDatetimeFromUnixTime,
     getActualUnixTimeForStore,
-    getUnixTime,
+    getUnixTimeFromLocalDatetime,
     getAMOrPM,
     getCombinedDateAndTimeValues
 } from '@/lib/datetime.ts';
@@ -154,7 +154,7 @@ const dateTime = computed<Date>({
         return getLocalDatetimeFromUnixTime(props.modelValue);
     },
     set: (value: Date) => {
-        const unixTime = getUnixTime(value);
+        const unixTime = getUnixTimeFromLocalDatetime(value);
 
         if (unixTime < 0) {
             emit('error', 'Date is too early');
@@ -225,7 +225,7 @@ const currentSecond = computed<string>({
 });
 
 const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
-const displayTime = computed<string>(() => formatUnixTimeToLongDateTime(getActualUnixTimeForStore(getUnixTime(dateTime.value), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes())));
+const displayTime = computed<string>(() => formatUnixTimeToLongDateTime(getActualUnixTimeForStore(getUnixTimeFromLocalDatetime(dateTime.value), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes())));
 
 function toggleMeridiemIndicator(): void {
     if (currentMeridiemIndicator.value === MeridiemIndicator.AM.name) {

src/components/desktop/MonthRangeSelectionDialog.vue

@@ -71,6 +71,7 @@ import { useI18n } from '@/locales/helpers.ts';
 import { type CommonMonthRangeSelectionProps, useMonthRangeSelectionBase } from '@/components/base/MonthRangeSelectionBase.ts';
 
 import { ThemeType } from '@/core/theme.ts';
+import { type TextualYearMonth } from '@/core/datetime.ts';
 
 interface DesktopMonthRangeSelectionProps extends CommonMonthRangeSelectionProps {
     persistent?: boolean;
@@ -79,7 +80,7 @@ interface DesktopMonthRangeSelectionProps extends CommonMonthRangeSelectionProps
 const props = defineProps<DesktopMonthRangeSelectionProps>();
 const emit = defineEmits<{
     (e: 'update:show', value: boolean): void;
-    (e: 'dateRange:change', minYearMonth: string, maxYearMonth: string): void;
+    (e: 'dateRange:change', minYearMonth: TextualYearMonth | '', maxYearMonth: TextualYearMonth | ''): void;
     (e: 'error', message: string): void;
 }>();
 

src/components/desktop/MonthSelectionDialog.vue

@@ -50,6 +50,7 @@ import { useI18n } from '@/locales/helpers.ts';
 import { type CommonMonthSelectionProps, useMonthSelectionBase } from '@/components/base/MonthSelectionBase.ts';
 
 import { ThemeType } from '@/core/theme.ts';
+import type { Year0BasedMonth } from '@/core/datetime.ts';
 
 interface DesktopMonthSelectionProps extends CommonMonthSelectionProps {
     persistent?: boolean;
@@ -57,7 +58,7 @@ interface DesktopMonthSelectionProps extends CommonMonthSelectionProps {
 
 const props = defineProps<DesktopMonthSelectionProps>();
 const emit = defineEmits<{
-    (e: 'update:modelValue', value: string): void;
+    (e: 'update:modelValue', value: Year0BasedMonth): void;
     (e: 'update:show', value: boolean): void;
     (e: 'error', message: string): void;
 }>();
@@ -65,7 +66,7 @@ const emit = defineEmits<{
 const theme = useTheme();
 
 const { tt, getMonthShortName } = useI18n();
-const { yearRange, monthValue, isYearFirst, getMonthSelectionValue, getTextualYearMonth } = useMonthSelectionBase(props);
+const { yearRange, monthValue, isYearFirst, getMonthSelectionValue, getYear0BasedMonth } = useMonthSelectionBase(props);
 
 const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
 const showState = computed<boolean>({
@@ -75,7 +76,7 @@ const showState = computed<boolean>({
 
 function confirm(): void {
     try {
-        const finalMonthRange = getTextualYearMonth();
+        const finalMonthRange = getYear0BasedMonth();
 
         if (!finalMonthRange) {
             return;

src/components/mobile/DateSelectionSheet.vue

@@ -45,17 +45,17 @@ import { useI18n } from '@/locales/helpers.ts';
 import { useEnvironmentsStore } from '@/stores/environment.ts';
 import { useUserStore } from '@/stores/user.ts';
 
-import { type WeekDayValue } from '@/core/datetime.ts';
+import { type TextualYearMonthDay, type WeekDayValue } from '@/core/datetime.ts';
 import { arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
-import { getCurrentYear } from '@/lib/datetime.ts';
+import { getAllowedYearRange } from '@/lib/datetime.ts';
 
 const props = defineProps<{
-    modelValue?: string;
+    modelValue?: TextualYearMonthDay;
     show: boolean;
 }>();
 
 const emit = defineEmits<{
-    (e: 'update:modelValue', value: string): void;
+    (e: 'update:modelValue', value: TextualYearMonthDay): void;
     (e: 'update:show', value: boolean): void;
 }>();
 
@@ -64,10 +64,7 @@ const { tt, getAllMinWeekdayNames, getMonthShortName, isLongDateMonthAfterYear }
 const environmentsStore = useEnvironmentsStore();
 const userStore = useUserStore();
 
-const yearRange = ref<number[]>([
-    2000,
-    getCurrentYear() + 1
-]);
+const yearRange = ref<number[]>(getAllowedYearRange());
 const dateTime = ref<string>('');
 
 const isDarkMode = computed<boolean>(() => environmentsStore.framework7DarkMode || false);
@@ -81,7 +78,7 @@ function clear(): void {
 }
 
 function confirm(): void {
-    emit('update:modelValue', dateTime.value);
+    emit('update:modelValue', dateTime.value as TextualYearMonthDay);
     emit('update:show', false);
 }
 

src/components/mobile/DateTimeSelectionSheet.vue

@@ -132,7 +132,7 @@ import {
     getLocalDatetimeFromUnixTime,
     getActualUnixTimeForStore,
     getCurrentUnixTime,
-    getUnixTime,
+    getUnixTimeFromLocalDatetime,
     getAMOrPM,
     getCombinedDateAndTimeValues
 } from '@/lib/datetime.ts';
@@ -225,7 +225,7 @@ const currentSecond = computed<string>({
 });
 
 const isDarkMode = computed<boolean>(() => environmentsStore.framework7DarkMode || false);
-const displayTime = computed<string>(() => formatUnixTimeToLongDateTime(getActualUnixTimeForStore(getUnixTime(dateTime.value), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes())));
+const displayTime = computed<string>(() => formatUnixTimeToLongDateTime(getActualUnixTimeForStore(getUnixTimeFromLocalDatetime(dateTime.value), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes())));
 const switchButtonTitle = computed<string>(() => mode.value === 'time' ? 'Date' : 'Time');
 
 function switchMode(): void {
@@ -249,7 +249,7 @@ function confirm(): void {
         return;
     }
 
-    const unixTime = getUnixTime(dateTime.value);
+    const unixTime = getUnixTimeFromLocalDatetime(dateTime.value);
 
     if (unixTime < 0) {
         showToast('Date is too early');

src/components/mobile/MonthRangeSelectionSheet.vue

@@ -52,10 +52,12 @@ import { type CommonMonthRangeSelectionProps, useMonthRangeSelectionBase } from
 
 import { useEnvironmentsStore } from '@/stores/environment.ts';
 
+import { type TextualYearMonth } from '@/core/datetime.ts';
+
 const props = defineProps<CommonMonthRangeSelectionProps>();
 const emit = defineEmits<{
     (e: 'update:show', value: boolean): void;
-    (e: 'dateRange:change', minYearMonth: string, maxYearMonth: string): void;
+    (e: 'dateRange:change', minYearMonth: TextualYearMonth | '', maxYearMonth: TextualYearMonth | ''): void;
 }>();
 
 const { tt, getMonthShortName } = useI18n();

src/components/mobile/MonthSelectionSheet.vue

@@ -44,17 +44,18 @@ import { useI18n } from '@/locales/helpers.ts';
 import { useI18nUIComponents } from '@/lib/ui/mobile.ts';
 import { type CommonMonthSelectionProps, useMonthSelectionBase } from '@/components/base/MonthSelectionBase.ts';
 
+import type { Year0BasedMonth } from '@/core/datetime.ts';
 import { useEnvironmentsStore } from '@/stores/environment.ts';
 
 const props = defineProps<CommonMonthSelectionProps>();
 const emit = defineEmits<{
-    (e: 'update:modelValue', value: string): void;
+    (e: 'update:modelValue', value: Year0BasedMonth): void;
     (e: 'update:show', value: boolean): void;
 }>();
 
 const { tt, getMonthShortName } = useI18n();
 const { showToast } = useI18nUIComponents();
-const { yearRange, monthValue, isYearFirst, getMonthSelectionValue, getTextualYearMonth } = useMonthSelectionBase(props);
+const { yearRange, monthValue, isYearFirst, getMonthSelectionValue, getYear0BasedMonth } = useMonthSelectionBase(props);
 
 const environmentsStore = useEnvironmentsStore();
 
@@ -62,7 +63,7 @@ const isDarkMode = computed<boolean>(() => environmentsStore.framework7DarkMode
 
 function confirm(): void {
     try {
-        const finalMonthRange = getTextualYearMonth();
+        const finalMonthRange = getYear0BasedMonth();
 
         if (!finalMonthRange) {
             return;