support calendar display type (Gregorian and Buddhist)

src/components/base/DateRangeSelectionBase.ts

@@ -1,10 +1,9 @@
 import { ref, computed } from 'vue';
 
 import { type TimeRangeAndDateType, type PresetDateRange, type UnixTimeRange, type WeekDayValue, DateRange } from '@/core/datetime.ts';
-import { arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
+
 import {
     getCurrentUnixTime,
-    getAllowedYearRange,
     getLocalDatetimeFromUnixTime,
     getUnixTimeFromLocalDatetime,
     getTodayFirstUnixTime,
@@ -46,21 +45,16 @@ function getDateRangeFromProps(props: CommonDateRangeSelectionProps): { minDate:
 }
 
 export function useDateRangeSelectionBase(props: CommonDateRangeSelectionProps) {
-    const { tt, getAllMinWeekdayNames, formatUnixTimeToLongDateTime, isLongDateMonthAfterYear, isLongTime24HourFormat } = useI18n();
+    const { tt, formatUnixTimeToLongDateTime } = useI18n();
     const userStore = useUserStore();
     const { minDate, maxDate } = getDateRangeFromProps(props);
 
-    const yearRange = ref<number[]>(getAllowedYearRange());
-
     const dateRange = ref<Date[]>([
         getLocalDatetimeFromUnixTime(getDummyUnixTimeForLocalUsage(minDate, getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes())),
         getLocalDatetimeFromUnixTime(getDummyUnixTimeForLocalUsage(maxDate, getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes()))
     ]);
 
     const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
-    const dayNames = computed<string[]>(() => arrangeArrayWithNewStartIndex(getAllMinWeekdayNames(), firstDayOfWeek.value));
-    const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
-    const is24Hour = computed<boolean>(() => isLongTime24HourFormat());
     const beginDateTime = computed<string>(() => {
         const actualBeginUnixTime = getActualUnixTimeForStore(getUnixTimeFromLocalDatetime(dateRange.value[0]), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes());
         return formatUnixTimeToLongDateTime(actualBeginUnixTime);
@@ -123,12 +117,8 @@ export function useDateRangeSelectionBase(props: CommonDateRangeSelectionProps)
 
     return {
         // states
-        yearRange,
         dateRange,
         // computed states
-        dayNames,
-        isYearFirst,
-        is24Hour,
         beginDateTime,
         endDateTime,
         presetRanges,

src/components/base/DateTimeSelectionBase.ts

@@ -2,12 +2,7 @@ import { ref, computed } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
 
-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 { getAllowedYearRange } from '@/lib/datetime.ts';
 
 export interface TimePickerValue {
     value: string;
@@ -16,9 +11,7 @@ export interface TimePickerValue {
 
 export function useDateTimeSelectionBase() {
     const {
-        getAllMinWeekdayNames,
         getAllMeridiemIndicators,
-        isLongDateMonthAfterYear,
         isLongTime24HourFormat,
         isLongTimeMeridiemIndicatorFirst,
         isLongTimeHourTwoDigits,
@@ -26,22 +19,14 @@ export function useDateTimeSelectionBase() {
         isLongTimeSecondTwoDigits
     } = useI18n();
 
-    const userStore = useUserStore();
-
     const is24Hour = ref<boolean>(isLongTime24HourFormat());
     const isHourTwoDigits = ref<boolean>(isLongTimeHourTwoDigits());
     const isMinuteTwoDigits = ref<boolean>(isLongTimeMinuteTwoDigits());
     const isSecondTwoDigits = ref<boolean>(isLongTimeSecondTwoDigits());
     const isMeridiemIndicatorFirst = ref<boolean>(isLongTimeMeridiemIndicatorFirst() || false);
 
-    const yearRange = ref<number[]>(getAllowedYearRange());
-
     const meridiemItems = computed<NameValue[]>(() => getAllMeridiemIndicators());
 
-    const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
-    const dayNames = computed<string[]>(() => arrangeArrayWithNewStartIndex(getAllMinWeekdayNames(), firstDayOfWeek.value));
-    const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
-
     function getDisplayTimeValue(value: number, forceTwoDigits: boolean): string {
         if (forceTwoDigits && value < 10) {
             return `0${value}`;
@@ -96,12 +81,8 @@ export function useDateTimeSelectionBase() {
         isMinuteTwoDigits,
         isSecondTwoDigits,
         isMeridiemIndicatorFirst,
-        yearRange,
         // computed
         meridiemItems,
-        firstDayOfWeek,
-        dayNames,
-        isYearFirst,
         // functions
         getDisplayTimeValue,
         generateAllHours,

src/components/base/FiscalYearStartSelectionBase.ts

@@ -2,11 +2,9 @@ import { ref, computed } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
 
-import { useUserStore } from '@/stores/user.ts';
-
-import { type WeekDayValue } from '@/core/datetime.ts';
+import type { MonthDay } from '@/core/datetime.ts';
 import { FiscalYearStart } from '@/core/fiscalyear.ts';
-import { arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
+
 import {
     getLocalDatetimeFromUnixTime,
     getThisYearFirstUnixTime,
@@ -39,12 +37,7 @@ function getFiscalYearStartFromProps(props: CommonFiscalYearStartSelectionProps)
 }
 
 export function useFiscalYearStartSelectionBase(props: CommonFiscalYearStartSelectionProps) {
-    const {
-        getAllMinWeekdayNames,
-        formatGregorianCalendarMonthDashDayToLongMonthDay
-    } = useI18n();
-
-    const userStore = useUserStore();
+    const { formatGregorianCalendarMonthDashDayToLongMonthDay } = useI18n();
 
     const disabledDates = (date: Date) => {
         // Disable February 29 (leap day)
@@ -53,18 +46,15 @@ export function useFiscalYearStartSelectionBase(props: CommonFiscalYearStartSele
 
     const selectedFiscalYearStart = ref<number>(getFiscalYearStartFromProps(props));
 
-    const selectedFiscalYearStartValue = computed<string>({
+    const selectedFiscalYearStartValue = computed<Date>({
         get: () => {
             const fiscalYearStart = FiscalYearStart.valueOf(selectedFiscalYearStart.value);
+            const monthDay: MonthDay = fiscalYearStart?.toMonthDay() ?? FiscalYearStart.Default.toMonthDay();
 
-            if (fiscalYearStart) {
-                return fiscalYearStart.toMonthDashDayString();
-            } else {
-                return FiscalYearStart.Default.toMonthDashDayString();
-            }
+            return new Date(new Date().getFullYear(), monthDay.month - 1, monthDay.day);
         },
-        set: (value: string) => {
-            const fiscalYearStart = FiscalYearStart.parse(value);
+        set: (value: Date) => {
+            const fiscalYearStart = FiscalYearStart.of(value.getMonth() + 1, value.getDate());
 
             if (fiscalYearStart) {
                 selectedFiscalYearStart.value = fiscalYearStart.value;
@@ -87,9 +77,6 @@ export function useFiscalYearStartSelectionBase(props: CommonFiscalYearStartSele
     const allowedMinDate = computed<Date>(() => getLocalDatetimeFromUnixTime(getThisYearFirstUnixTime()));
     const allowedMaxDate = computed<Date>(() => getLocalDatetimeFromUnixTime(getThisYearLastUnixTime()));
 
-    const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
-    const dayNames = computed<string[]>(() => arrangeArrayWithNewStartIndex(getAllMinWeekdayNames(), firstDayOfWeek.value));
-
     return {
         // constants
         disabledDates,
@@ -99,8 +86,6 @@ export function useFiscalYearStartSelectionBase(props: CommonFiscalYearStartSele
         selectedFiscalYearStartValue,
         displayFiscalYearStartDate,
         allowedMinDate,
-        allowedMaxDate,
-        firstDayOfWeek,
-        dayNames
+        allowedMaxDate
     };
 }

src/components/base/MonthRangeSelectionBase.ts

@@ -7,7 +7,6 @@ import {
     getYear0BasedMonthObjectFromString,
     getYearMonthStringFromYear0BasedMonthObject,
     getCurrentUnixTime,
-    getAllowedYearRange,
     getThisYearFirstUnixTime,
     getYearMonthFirstUnixTime,
     getYearMonthLastUnixTime
@@ -15,11 +14,6 @@ import {
 
 import { useI18n } from '@/locales/helpers.ts';
 
-export interface MonthSelectionValue {
-    year: number;
-    month: number; // 0-based month (0 = January, 11 = December)
-}
-
 export interface CommonMonthRangeSelectionProps {
     minTime?: TextualYearMonth;
     maxTime?: TextualYearMonth;
@@ -28,7 +22,7 @@ export interface CommonMonthRangeSelectionProps {
     show: boolean;
 }
 
-function getMonthRangeFromProps(props: CommonMonthRangeSelectionProps): { minDate: MonthSelectionValue; maxDate: MonthSelectionValue } {
+function getMonthRangeFromProps(props: CommonMonthRangeSelectionProps): { minDate: Year0BasedMonth; maxDate: Year0BasedMonth } {
     let minDate: Year0BasedMonth = getYear0BasedMonthObjectFromUnixTime(getThisYearFirstUnixTime());
     let maxDate: Year0BasedMonth = getYear0BasedMonthObjectFromUnixTime(getCurrentUnixTime());
 
@@ -49,67 +43,34 @@ function getMonthRangeFromProps(props: CommonMonthRangeSelectionProps): { minDat
     }
 
     return {
-        minDate: {
-            year: minDate.year,
-            month: minDate.month0base
-        },
-        maxDate: {
-            year: maxDate.year,
-            month: maxDate.month0base
-        }
+        minDate: minDate,
+        maxDate: maxDate
     };
 }
 
 export function useMonthRangeSelectionBase(props: CommonMonthRangeSelectionProps) {
-    const { formatUnixTimeToLongYearMonth, isLongDateMonthAfterYear } = useI18n();
+    const { formatUnixTimeToLongYearMonth } = useI18n();
     const { minDate, maxDate } = getMonthRangeFromProps(props);
 
-    const yearRange = ref<number[]>(getAllowedYearRange());
-    const dateRange = ref<MonthSelectionValue[]>([
+    const dateRange = ref<Year0BasedMonth[]>([
         minDate,
         maxDate
     ]);
 
-    const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
-    const beginDateTime = computed<string>(() => formatUnixTimeToLongYearMonth(getYearMonthFirstUnixTime({
-        year: dateRange.value[0].year,
-        month0base: dateRange.value[0].month
-    })));
-    const endDateTime = computed<string>(() => formatUnixTimeToLongYearMonth(getYearMonthLastUnixTime({
-        year: dateRange.value[1].year,
-        month0base: dateRange.value[1].month
-    })));
-
-    function getMonthSelectionValue(yearMonth: TextualYearMonth): MonthSelectionValue | null {
-        const yearMonthObj = getYear0BasedMonthObjectFromString(yearMonth);
-
-        if (!yearMonthObj) {
-            return null;
-        }
-
-        return {
-            year: yearMonthObj.year,
-            month: yearMonthObj.month0base
-        };
-    }
+    const beginDateTime = computed<string>(() => formatUnixTimeToLongYearMonth(getYearMonthFirstUnixTime(dateRange.value[0])));
+    const endDateTime = computed<string>(() => formatUnixTimeToLongYearMonth(getYearMonthLastUnixTime(dateRange.value[1])));
 
     function getFinalMonthRange(): { minYearMonth: TextualYearMonth | '', maxYearMonth: TextualYearMonth | '' } | null {
         if (!dateRange.value[0] || !dateRange.value[1]) {
             return null;
         }
 
-        if (dateRange.value[0].year <= 0 || dateRange.value[0].month < 0 || dateRange.value[1].year <= 0 || dateRange.value[1].month < 0) {
+        if (dateRange.value[0].year <= 0 || dateRange.value[0].month0base < 0 || dateRange.value[1].year <= 0 || dateRange.value[1].month0base < 0) {
             throw new Error('Date is too early');
         }
 
-        const minYearMonth = getYearMonthStringFromYear0BasedMonthObject({
-            year: dateRange.value[0].year,
-            month0base: dateRange.value[0].month
-        });
-        const maxYearMonth = getYearMonthStringFromYear0BasedMonthObject({
-            year: dateRange.value[1].year,
-            month0base: dateRange.value[1].month
-        });
+        const minYearMonth = getYearMonthStringFromYear0BasedMonthObject(dateRange.value[0]);
+        const maxYearMonth = getYearMonthStringFromYear0BasedMonthObject(dateRange.value[1]);
 
         return {
             minYearMonth,
@@ -119,14 +80,11 @@ export function useMonthRangeSelectionBase(props: CommonMonthRangeSelectionProps
 
     return {
         // states
-        yearRange,
         dateRange,
         // computed states
-        isYearFirst,
         beginDateTime,
         endDateTime,
         // functions
-        getMonthSelectionValue,
         getFinalMonthRange
     };
 }

src/components/base/MonthSelectionBase.ts

@@ -1,82 +0,0 @@
-import { ref, computed } from 'vue';
-
-import type { Year0BasedMonth } from '@/core/datetime.ts';
-
-import {
-    getYear0BasedMonthObjectFromUnixTime,
-    getAllowedYearRange,
-    getThisMonthFirstUnixTime
-} from '@/lib/datetime.ts';
-
-import { useI18n } from '@/locales/helpers.ts';
-
-export interface MonthSelectionValue {
-    year: number;
-    month: number; // 0-based month (0 = January, 11 = December)
-}
-
-export interface CommonMonthSelectionProps {
-    modelValue?: Year0BasedMonth;
-    title?: string;
-    hint?: string;
-    show: boolean;
-}
-
-function getYearMonthValueFromProps(props: CommonMonthSelectionProps): MonthSelectionValue {
-    let value: Year0BasedMonth = getYear0BasedMonthObjectFromUnixTime(getThisMonthFirstUnixTime());
-
-    if (props.modelValue) {
-        value = props.modelValue;
-    }
-
-    return {
-        year: value.year,
-        month: value.month0base
-    };
-}
-
-export function useMonthSelectionBase(props: CommonMonthSelectionProps) {
-    const { isLongDateMonthAfterYear } = useI18n();
-
-    const yearRange = ref<number[]>(getAllowedYearRange());
-    const monthValue = ref<MonthSelectionValue>(getYearMonthValueFromProps(props));
-
-    const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
-
-    function getMonthSelectionValue(yearMonth: Year0BasedMonth): MonthSelectionValue | null {
-        if (!yearMonth) {
-            return null;
-        }
-
-        return {
-            year: yearMonth.year,
-            month: yearMonth.month0base
-        };
-    }
-
-    function getYear0BasedMonth(): Year0BasedMonth | null {
-        if (!monthValue.value) {
-            return null;
-        }
-
-        if (monthValue.value.year <= 0 || monthValue.value.month < 0) {
-            throw new Error('Date is too early');
-        }
-
-        return {
-            year: monthValue.value.year,
-            month0base: monthValue.value.month
-        };
-    }
-
-    return {
-        // states
-        yearRange,
-        monthValue,
-        // computed states
-        isYearFirst,
-        // functions
-        getMonthSelectionValue,
-        getYear0BasedMonth
-    };
-}

src/components/common/DateTimePicker.vue

@@ -0,0 +1,133 @@
+<template>
+    <vue-date-picker ref="datetimepicker"
+                     inline auto-apply
+                     enable-seconds
+                     six-weeks="center"
+                     :class="datetimePickerClass"
+                     :config="noSwipeAndScroll ? { noSwipe: true } : undefined"
+                     :dark="isDarkMode"
+                     :vertical="vertical"
+                     :enable-time-picker="enableTimePicker"
+                     :disable-year-select="disableYearSelect"
+                     :clearable="!!clearable"
+                     :year-range="yearRange"
+                     :day-names="dayNames"
+                     :week-start="firstDayOfWeek"
+                     :year-first="isYearFirst"
+                     :is24="is24Hour"
+                     :min-date="minDate"
+                     :max-date="maxDate"
+                     :disabled-dates="disabledDates"
+                     :month-change-on-scroll="!noSwipeAndScroll"
+                     :range="isDateRange ? { partialRange: false } : undefined"
+                     :preset-dates="presetRanges"
+                     v-model="dateTime">
+        <template #year="{ value }">
+            {{ getDisplayYear(value) }}
+        </template>
+        <template #year-overlay-value="{ value }">
+            {{ getDisplayYear(value) }}
+        </template>
+        <template #month="{ value }">
+            {{ getDisplayMonth(value) }}
+        </template>
+        <template #month-overlay-value="{ value }">
+            {{ getDisplayMonth(value) }}
+        </template>
+        <template #day="{ date }">
+            {{ getDisplayDay(date) }}
+        </template>
+        <template #am-pm-button="{ toggle, value }">
+            <button class="dp__pm_am_button" tabindex="0" @click="toggle">{{ tt(`datetime.${value}.content`) }}</button>
+        </template>
+    </vue-date-picker>
+</template>
+
+<script setup lang="ts">
+import { computed, useTemplateRef } from 'vue';
+import VueDatePicker, { type MenuView } from '@vuepic/vue-datepicker';
+
+import { useI18n } from '@/locales/helpers.ts';
+
+import { useUserStore } from '@/stores/user.ts';
+
+import { type PresetDateRange, type WeekDayValue } from '@/core/datetime.ts';
+import { isArray, arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
+import { getAllowedYearRange, getYearMonthDayDateTime } from '@/lib/datetime.ts';
+
+type VueDatePickerType = InstanceType<typeof VueDatePicker>;
+type SupportedModelValue = Date | Date[] | null;
+
+const props = defineProps<{
+    modelValue: SupportedModelValue;
+    datetimePickerClass?: string;
+    isDarkMode: boolean;
+    enableTimePicker: boolean;
+    disableYearSelect?: boolean;
+    vertical?: boolean;
+    noSwipeAndScroll?: boolean;
+    clearable?: boolean;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDates?: (date: Date) => boolean;
+    presetRanges?: PresetDateRange[];
+}>();
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: SupportedModelValue): void;
+}>();
+
+const {
+    tt,
+    getAllMinWeekdayNames,
+    isLongDateMonthAfterYear,
+    isLongTime24HourFormat,
+    getCalendarShortYearFromUnixTime,
+    getCalendarShortMonthFromUnixTime,
+    getCalendarDayOfMonthFromUnixTime
+} = useI18n();
+
+const userStore = useUserStore();
+
+const datetimepicker = useTemplateRef<VueDatePickerType>('datetimepicker');
+
+const yearRange = getAllowedYearRange();
+
+const dayNames = computed<string[]>(() => arrangeArrayWithNewStartIndex(getAllMinWeekdayNames(), firstDayOfWeek.value));
+const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
+const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
+const is24Hour = computed<boolean>(() => isLongTime24HourFormat());
+
+const dateTime = computed<SupportedModelValue>({
+    get: () => props.modelValue,
+    set: (value: SupportedModelValue) => emit('update:modelValue', value)
+});
+
+const isDateRange = computed<boolean>(() => isArray(props.modelValue));
+
+function switchView(viewType: MenuView): void {
+    datetimepicker.value?.switchView(viewType);
+}
+
+function getDisplayYear(year: number): string {
+    return getCalendarShortYearFromUnixTime(getYearMonthDayDateTime(year, 1, 1).getUnixTime());
+}
+
+function getDisplayMonth(month: number): string {
+    if (isArray(dateTime.value)) {
+        return getCalendarShortMonthFromUnixTime(getYearMonthDayDateTime(dateTime.value[0].getFullYear(), month + 1, 1).getUnixTime());
+    } else if (dateTime.value) {
+        return getCalendarShortMonthFromUnixTime(getYearMonthDayDateTime(dateTime.value.getFullYear(), month + 1, 1).getUnixTime());
+    } else {
+        return getCalendarShortMonthFromUnixTime(getYearMonthDayDateTime(new Date().getFullYear(), month + 1, 1).getUnixTime());
+    }
+}
+
+function getDisplayDay(date: Date): string {
+    return getCalendarDayOfMonthFromUnixTime(getYearMonthDayDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate()).getUnixTime());
+}
+
+defineExpose({
+    switchView
+});
+</script>

src/components/common/MonthPicker.vue

@@ -0,0 +1,110 @@
+<template>
+    <vue-date-picker inline auto-apply
+                     month-picker
+                     :class="monthPickerClass"
+                     :dark="isDarkMode"
+                     :clearable="!!clearable"
+                     :year-range="yearRange"
+                     :year-first="isYearFirst"
+                     :range="isDateRange ? { partialRange: false } : undefined"
+                     v-model="dateTime">
+        <!-- @vue-expect-error It seems to be a bug in vue-date-picker (https://github.com/Vuepic/vue-datepicker/issues/1154), when using the month picker, it does not provide the value and text props in the slot, but provides the year. -->
+        <template #year="{ year }">
+            {{ getDisplayYear(year) }}
+        </template>
+        <template #year-overlay-value="{ value }">
+            {{ getDisplayYear(value) }}
+        </template>
+        <template #month="{ value }">
+            {{ getDisplayMonth(value) }}
+        </template>
+        <template #month-overlay-value="{ value }">
+            {{ getDisplayMonth(value) }}
+        </template>
+    </vue-date-picker>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import VueDatePicker from '@vuepic/vue-datepicker';
+
+import { useI18n } from '@/locales/helpers.ts';
+
+import type { Year0BasedMonth } from '@/core/datetime.ts';
+
+import { isArray } from '@/lib/common.ts';
+import { getAllowedYearRange, getYearMonthDayDateTime } from '@/lib/datetime.ts';
+
+export interface MonthSelectionValue {
+    year: number;
+    month: number; // 0-based month (0 = January, 11 = December)
+}
+
+type SupportedModelValue = Year0BasedMonth | Year0BasedMonth[];
+
+const props = defineProps<{
+    modelValue: SupportedModelValue;
+    monthPickerClass?: string;
+    isDarkMode: boolean;
+    clearable?: boolean;
+}>();
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: SupportedModelValue): void;
+}>();
+
+const {
+    isLongDateMonthAfterYear,
+    getCalendarShortYearFromUnixTime,
+    getCalendarShortMonthFromUnixTime
+} = useI18n();
+
+const yearRange = getAllowedYearRange();
+
+const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
+
+const dateTime = computed<MonthSelectionValue | MonthSelectionValue[]>({
+    get: () => {
+        if (isArray(props.modelValue)) {
+            return props.modelValue.map(item => getMonthSelectionValueFromYear0BasedMonth(item));
+        } else {
+            return getMonthSelectionValueFromYear0BasedMonth(props.modelValue);
+        }
+    },
+    set: (value: MonthSelectionValue | MonthSelectionValue[]) => {
+        if (isArray(value)) {
+            emit('update:modelValue', value.map(item => getYear0BasedMonthFromMonthSelectionValue(item)));
+        } else {
+            emit('update:modelValue', getYear0BasedMonthFromMonthSelectionValue(value));
+        }
+    }
+});
+
+const isDateRange = computed<boolean>(() => isArray(props.modelValue));
+
+function getMonthSelectionValueFromYear0BasedMonth(value: Year0BasedMonth): MonthSelectionValue {
+    return {
+        year: value.year,
+        month: value.month0base
+    };
+}
+
+function getYear0BasedMonthFromMonthSelectionValue(value: MonthSelectionValue): Year0BasedMonth {
+    return {
+        year: value.year,
+        month0base: value.month
+    };
+}
+
+function getDisplayYear(year: number): string {
+    return getCalendarShortYearFromUnixTime(getYearMonthDayDateTime(year, 1, 1).getUnixTime());
+}
+
+function getDisplayMonth(month: number): string {
+    if (isArray(dateTime.value)) {
+        return getCalendarShortMonthFromUnixTime(getYearMonthDayDateTime(dateTime.value[0].year, month + 1, 1).getUnixTime());
+    } else {
+        return getCalendarShortMonthFromUnixTime(getYearMonthDayDateTime(dateTime.value.year, month + 1, 1).getUnixTime());
+    }
+}
+</script>

src/components/common/TransactionCalendar.vue

@@ -0,0 +1,115 @@
+<template>
+    <vue-date-picker inline auto-apply
+                     model-type="yyyy-MM-dd"
+                     :class="`transaction-calendar ${calendarClass}`"
+                     :config="{ noSwipe: true }"
+                     :readonly="readonly"
+                     :dark="isDarkMode"
+                     :enable-time-picker="false"
+                     :clearable="false"
+                     :day-names="dayNames"
+                     :week-start="firstDayOfWeek"
+                     :min-date="minDate"
+                     :max-date="maxDate"
+                     :disabled-dates="noTransactionInMonthDay"
+                     :prevent-min-max-navigation="true"
+                     :hide-offset-dates="true"
+                     :disable-month-year-select="true"
+                     :month-change-on-scroll="false"
+                     :month-change-on-arrows="false"
+                     v-model="dateTime">
+        <template #day="{ day, date }">
+            <div class="transaction-calendar-daily-amounts">
+                <span :class="dayHasTransactionClass && dailyTotalAmounts && dailyTotalAmounts[day] ? dayHasTransactionClass : undefined">{{ getDisplayDay(date) }}</span>
+                <span class="transaction-calendar-daily-amount text-income" v-if="dailyTotalAmounts && dailyTotalAmounts[day] && dailyTotalAmounts[day].income">{{ getDisplayMonthTotalAmount(dailyTotalAmounts[day].income, defaultCurrency, '', dailyTotalAmounts[day].incompleteIncome) }}</span>
+                <span class="transaction-calendar-daily-amount text-expense" v-if="dailyTotalAmounts && dailyTotalAmounts[day] && dailyTotalAmounts[day].expense">{{ getDisplayMonthTotalAmount(dailyTotalAmounts[day].expense, defaultCurrency, '', dailyTotalAmounts[day].incompleteExpense) }}</span>
+            </div>
+        </template>
+    </vue-date-picker>
+</template>
+
+<script setup lang="ts">
+import { computed, } from 'vue';
+import { useI18n } from '@/locales/helpers.ts';
+
+import { useUserStore } from '@/stores/user.ts';
+import type { TransactionTotalAmount } from '@/stores/transaction.ts';
+
+import { type TextualYearMonthDay, type WeekDayValue } from '@/core/datetime.ts';
+import { INCOMPLETE_AMOUNT_SUFFIX } from '@/consts/numeral.ts';
+
+import { arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
+import {
+    getTimezoneOffsetMinutes,
+    getBrowserTimezoneOffsetMinutes,
+    getUnixTimeFromLocalDatetime,
+    getActualUnixTimeForStore,
+    getYearMonthDayDateTime,
+    parseDateTimeFromUnixTime
+} from '@/lib/datetime.ts';
+
+const props = defineProps<{
+    modelValue: TextualYearMonthDay | '';
+    isDarkMode: boolean;
+    defaultCurrency: string | false;
+    minDate: Date;
+    maxDate: Date;
+    weekDayNameType?: 'long' | 'short';
+    dailyTotalAmounts?: Record<string, TransactionTotalAmount>;
+    readonly?: boolean;
+    calendarClass?: string;
+    dayHasTransactionClass?: string;
+}>();
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: string): void;
+}>();
+
+const {
+    getAllLongWeekdayNames,
+    getAllShortWeekdayNames,
+    getCalendarDayOfMonthFromUnixTime,
+    formatAmountToLocalizedNumeralsWithCurrency
+} = useI18n();
+
+const userStore = useUserStore();
+
+const dayNames = computed<string[]>(() => arrangeArrayWithNewStartIndex(props.weekDayNameType === 'short' ? getAllShortWeekdayNames() : getAllLongWeekdayNames(), firstDayOfWeek.value));
+const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
+
+const dateTime = computed<TextualYearMonthDay | ''>({
+    get: () => props.modelValue,
+    set: (value: TextualYearMonthDay | '') => emit('update:modelValue', value)
+});
+
+function noTransactionInMonthDay(date: Date): boolean {
+    const dateTime = parseDateTimeFromUnixTime(getActualUnixTimeForStore(getUnixTimeFromLocalDatetime(date), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes()));
+    return !props.dailyTotalAmounts || !props.dailyTotalAmounts[dateTime.getGregorianCalendarDay()];
+}
+
+function getDisplayMonthTotalAmount(amount: number, currency: string | false, symbol: string, incomplete: boolean): string {
+    const displayAmount = formatAmountToLocalizedNumeralsWithCurrency(amount, currency);
+    return symbol + displayAmount + (incomplete ? INCOMPLETE_AMOUNT_SUFFIX : '');
+}
+
+function getDisplayDay(date: Date): string {
+    return getCalendarDayOfMonthFromUnixTime(getYearMonthDayDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate()).getUnixTime());
+}
+</script>
+
+<style>
+.transaction-calendar-daily-amounts {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.transaction-calendar .dp__main .dp__calendar .dp__calendar_row > .dp__calendar_item .transaction-calendar-daily-amounts > span {
+    display: block;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+</style>

src/components/desktop/DateRangeSelectionDialog.vue

@@ -18,29 +18,12 @@
                 </div>
             </template>
             <v-card-text class="mb-md-4 w-100 d-flex justify-center">
-                <vue-date-picker inline enable-seconds auto-apply
-                                 month-name-format="long"
-                                 six-weeks="center"
-                                 :clearable="false"
-                                 :dark="isDarkMode"
-                                 :week-start="firstDayOfWeek"
-                                 :year-range="yearRange"
-                                 :day-names="dayNames"
-                                 :year-first="isYearFirst"
-                                 :is24="is24Hour"
-                                 :range="{ partialRange: false }"
-                                 :preset-dates="presetRanges"
-                                 v-model="dateRange">
-                    <template #month="{ text }">
-                        {{ getMonthShortName(text) }}
-                    </template>
-                    <template #month-overlay-value="{ text }">
-                        {{ getMonthShortName(text) }}
-                    </template>
-                    <template #am-pm-button="{ toggle, value }">
-                        <button class="dp__pm_am_button" tabindex="0" @click="toggle">{{ tt(`datetime.${value}.content`) }}</button>
-                    </template>
-                </vue-date-picker>
+                <date-time-picker :is-dark-mode="isDarkMode"
+                                  :enable-time-picker="true"
+                                  :vertical="true"
+                                  :preset-dates="presetRanges"
+                                  v-model="dateRange">
+                </date-time-picker>
             </v-card-text>
             <v-card-text class="overflow-y-visible">
                 <div class="w-100 d-flex justify-center gap-4">
@@ -59,9 +42,6 @@ import { useTheme } from 'vuetify';
 import { useI18n } from '@/locales/helpers.ts';
 import { type CommonDateRangeSelectionProps, useDateRangeSelectionBase } from '@/components/base/DateRangeSelectionBase.ts';
 
-import { useUserStore } from '@/stores/user.ts';
-
-import { type WeekDayValue } from '@/core/datetime.ts';
 import { ThemeType } from '@/core/theme.ts';
 
 import {
@@ -84,13 +64,10 @@ const emit = defineEmits<{
 
 const theme = useTheme();
 
-const { tt, getMonthShortName } = useI18n();
-const { yearRange, dateRange, dayNames, isYearFirst, is24Hour, beginDateTime, endDateTime, presetRanges, getFinalDateRange } = useDateRangeSelectionBase(props);
-
-const userStore = useUserStore();
+const { tt } = useI18n();
+const { dateRange, beginDateTime, endDateTime, presetRanges, getFinalDateRange } = useDateRangeSelectionBase(props);
 
 const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
-const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
 const showState = computed<boolean>({
     get: () => props.show || false,
     set: (value) => emit('update:show', value)

src/components/desktop/DateSelect.vue

@@ -6,48 +6,35 @@
         :clearable="modelValue ? clearable : false"
         :label="label"
         :menu-props="{ contentClass: 'date-select-menu' }"
-        v-model="dateTime"
+        v-model="displayTime"
     >
         <template #selection>
             <span class="text-truncate cursor-pointer">{{ displayTime }}</span>
         </template>
 
         <template #no-data>
-            <vue-date-picker inline vertical auto-apply
-                             ref="datepicker"
-                             month-name-format="long"
-                             model-type="yyyy-MM-dd"
-                             :clearable="true"
-                             :enable-time-picker="false"
-                             :dark="isDarkMode"
-                             :week-start="firstDayOfWeek"
-                             :year-range="yearRange"
-                             :day-names="dayNames"
-                             :year-first="isYearFirst"
-                             v-model="dateTime">
-                <template #month="{ text }">
-                    {{ getMonthShortName(text) }}
-                </template>
-                <template #month-overlay-value="{ text }">
-                    {{ getMonthShortName(text) }}
-                </template>
-            </vue-date-picker>
+            <date-time-picker :is-dark-mode="isDarkMode"
+                              :enable-time-picker="false"
+                              :clearable="true"
+                              v-model="dateTime">
+            </date-time-picker>
         </template>
     </v-select>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { computed } from 'vue';
 import { useTheme } from 'vuetify';
 
 import { useI18n } from '@/locales/helpers.ts';
 
-import { useUserStore } from '@/stores/user.ts';
-
-import { type TextualYearMonthDay, type WeekDayValue } from '@/core/datetime.ts';
+import { type TextualYearMonthDay } from '@/core/datetime.ts';
 import { ThemeType } from '@/core/theme.ts';
-import { arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
-import { getAllowedYearRange } from '@/lib/datetime.ts';
+
+import {
+    getLocalDateFromYearDashMonthDashDay,
+    getGregorianCalendarYearAndMonthFromLocalDate
+} from '@/lib/datetime.ts';
 
 const props = defineProps<{
     modelValue?: TextualYearMonthDay;
@@ -59,32 +46,32 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: 'update:modelValue', value: TextualYearMonthDay): void;
+    (e: 'update:modelValue', value: TextualYearMonthDay | ''): void;
 }>();
 
 const theme = useTheme();
-const { tt, getAllMinWeekdayNames, getMonthShortName, formatGregorianCalendarYearDashMonthDashDayToLongDate, isLongDateMonthAfterYear } = useI18n();
+const { tt, formatGregorianCalendarYearDashMonthDashDayToLongDate } = useI18n();
 
-const userStore = useUserStore();
-
-const yearRange = ref<number[]>(getAllowedYearRange());
-
-const dateTime = computed<string>({
-    get: () => props.modelValue ?? '',
-    set: (value: string) => emit('update:modelValue', value as TextualYearMonthDay)
+const dateTime = computed<Date | null>({
+    get: () => props.modelValue ? getLocalDateFromYearDashMonthDashDay(props.modelValue) : null,
+    set: (value: Date | null) => emit('update:modelValue', value ? getGregorianCalendarYearAndMonthFromLocalDate(value) : '')
 });
 
 const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
-const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
-const dayNames = computed<string[]>(() => arrangeArrayWithNewStartIndex(getAllMinWeekdayNames(), firstDayOfWeek.value));
-const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
-const displayTime = computed<string>(() => {
-    if (props.modelValue) {
-        return formatGregorianCalendarYearDashMonthDashDayToLongDate(props.modelValue);
-    } else if (props.noDataText) {
-        return props.noDataText;
-    } else {
-        return tt('Unspecified');
+const displayTime = computed<string>({
+    get: () => {
+        if (props.modelValue) {
+            return formatGregorianCalendarYearDashMonthDashDayToLongDate(props.modelValue);
+        } else if (props.noDataText) {
+            return props.noDataText;
+        } else {
+            return tt('Unspecified');
+        }
+    },
+    set: (value: string) => {
+        if (!value) {
+            dateTime.value = null;
+        }
     }
 });
 </script>

src/components/desktop/DateTimeSelect.vue

@@ -12,28 +12,11 @@
         </template>
 
         <template #no-data>
-            <vue-date-picker inline vertical enable-seconds auto-apply
-                             ref="datepicker"
-                             month-name-format="long"
-                             :clearable="false"
-                             :enable-time-picker="false"
-                             :dark="isDarkMode"
-                             :week-start="firstDayOfWeek"
-                             :year-range="yearRange"
-                             :day-names="dayNames"
-                             :year-first="isYearFirst"
-                             :is24="is24Hour"
-                             v-model="dateTime">
-                <template #month="{ text }">
-                    {{ getMonthShortName(text) }}
-                </template>
-                <template #month-overlay-value="{ text }">
-                    {{ getMonthShortName(text) }}
-                </template>
-                <template #am-pm-button="{ toggle, value }">
-                    <button class="dp__pm_am_button" tabindex="0" @click="toggle">{{ tt(`datetime.${value}.content`) }}</button>
-                </template>
-            </vue-date-picker>
+            <date-time-picker :is-dark-mode="isDarkMode"
+                              :enable-time-picker="false"
+                              :vertical="true"
+                              v-model="dateTime">
+            </date-time-picker>
             <div class="date-time-select-time-picker-container">
                 <v-btn class="px-3" color="primary" variant="flat"
                        v-if="!is24Hour && isMeridiemIndicatorFirst"
@@ -50,6 +33,7 @@
                                 :hide-no-data="true"
                                 v-model="currentHour"
                                 @update:focused="onFocused(hourInput, $event)"
+                                @click="onFocused(hourInput, true)"
                                 @keydown="onKeyDown('hour', $event)"
                 />
                 <span>:</span>
@@ -63,6 +47,7 @@
                                 :hide-no-data="true"
                                 v-model="currentMinute"
                                 @update:focused="onFocused(minuteInput, $event)"
+                                @click="onFocused(minuteInput, true)"
                                 @keydown="onKeyDown('minute', $event)"
                 />
                 <span>:</span>
@@ -76,6 +61,7 @@
                                 :hide-no-data="true"
                                 v-model="currentSecond"
                                 @update:focused="onFocused(secondInput, $event)"
+                                @click="onFocused(secondInput, true)"
                                 @keydown="onKeyDown('second', $event)"
                 />
                 <v-btn class="px-3" color="primary" variant="flat"
@@ -124,11 +110,7 @@ const emit = defineEmits<{
 }>();
 
 const theme = useTheme();
-const {
-    tt,
-    getMonthShortName,
-    formatUnixTimeToLongDateTime
-} = useI18n();
+const { tt, formatUnixTimeToLongDateTime } = useI18n();
 
 const {
     is24Hour,
@@ -136,10 +118,6 @@ const {
     isMinuteTwoDigits,
     isSecondTwoDigits,
     isMeridiemIndicatorFirst,
-    yearRange,
-    firstDayOfWeek,
-    dayNames,
-    isYearFirst,
     getDisplayTimeValue,
     generateAllHours,
     generateAllMinutesOrSeconds

src/components/desktop/FiscalYearStartSelect.vue

@@ -12,29 +12,16 @@
         </template>
 
         <template #no-data>
-            <vue-date-picker inline auto-apply disable-year-select
-                             month-name-format="long"
-                             model-type="MM-dd"
-                             six-weeks="center"
-                             :config="{ noSwipe: true }"
-                             :month-change-on-scroll="false"
-                             :enable-time-picker="false"
-                             :min-date="allowedMinDate"
-                             :max-date="allowedMaxDate"
-                             :disabled-dates="disabledDates"
-                             :clearable="false"
-                             :dark="isDarkMode"
-                             :week-start="firstDayOfWeek"
-                             :day-names="dayNames"
-                             v-model="selectedFiscalYearStartValue"
-                             >
-                <template #month="{ text }">
-                    {{ getMonthShortName(text) }}
-                </template>
-                <template #month-overlay-value="{ text }">
-                    {{ getMonthShortName(text) }}
-                </template>
-            </vue-date-picker>
+            <date-time-picker :is-dark-mode="isDarkMode"
+                              :vertical="true"
+                              :enable-time-picker="false"
+                              :disable-year-select="true"
+                              :no-swipe-and-scroll="true"
+                              :min-date="allowedMinDate"
+                              :max-date="allowedMaxDate"
+                              :disabled-dates="disabledDates"
+                              v-model="selectedFiscalYearStartValue">
+            </date-time-picker>
         </template>
     </v-select>
 </template>
@@ -43,8 +30,6 @@
 import { computed, watch } from 'vue';
 import { useTheme } from 'vuetify';
 
-import { useI18n } from '@/locales/helpers.ts';
-
 import {
     type CommonFiscalYearStartSelectionProps,
     type CommonFiscalYearStartSelectionEmits,
@@ -56,8 +41,6 @@ import { ThemeType } from '@/core/theme.ts';
 const props = defineProps<CommonFiscalYearStartSelectionProps>();
 const emit = defineEmits<CommonFiscalYearStartSelectionEmits>();
 
-const { getMonthShortName } = useI18n();
-
 const theme = useTheme();
 
 const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
@@ -69,8 +52,6 @@ const {
     displayFiscalYearStartDate,
     allowedMinDate,
     allowedMaxDate,
-    firstDayOfWeek,
-    dayNames
 } = useFiscalYearStartSelectionBase(props);
 
 watch(() => props.modelValue, (newValue) => {

src/components/desktop/MonthRangeSelectionDialog.vue

@@ -20,36 +20,10 @@
             <v-card-text class="mb-md-4 w-100 d-flex justify-center">
                 <v-row class="match-height">
                     <v-col cols="12" md="6">
-                        <vue-date-picker inline month-picker auto-apply
-                                         month-name-format="long"
-                                         :clearable="false"
-                                         :dark="isDarkMode"
-                                         :year-range="yearRange"
-                                         :year-first="isYearFirst"
-                                         v-model="dateRange[0]">
-                            <template #month="{ text }">
-                                {{ getMonthShortName(text) }}
-                            </template>
-                            <template #month-overlay-value="{ text }">
-                                {{ getMonthShortName(text) }}
-                            </template>
-                        </vue-date-picker>
+                        <month-picker :is-dark-mode="isDarkMode" v-model="dateRange[0]"></month-picker>
                     </v-col>
                     <v-col cols="12" md="6">
-                        <vue-date-picker inline month-picker auto-apply
-                                         month-name-format="long"
-                                         :clearable="false"
-                                         :dark="isDarkMode"
-                                         :year-range="yearRange"
-                                         :year-first="isYearFirst"
-                                         v-model="dateRange[1]">
-                            <template #month="{ text }">
-                                {{ getMonthShortName(text) }}
-                            </template>
-                            <template #month-overlay-value="{ text }">
-                                {{ getMonthShortName(text) }}
-                            </template>
-                        </vue-date-picker>
+                        <month-picker :is-dark-mode="isDarkMode" v-model="dateRange[1]"></month-picker>
                     </v-col>
                 </v-row>
             </v-card-text>
@@ -73,6 +47,8 @@ import { type CommonMonthRangeSelectionProps, useMonthRangeSelectionBase } from
 import { ThemeType } from '@/core/theme.ts';
 import { type TextualYearMonth } from '@/core/datetime.ts';
 
+import { getYear0BasedMonthObjectFromString } from '@/lib/datetime.ts';
+
 interface DesktopMonthRangeSelectionProps extends CommonMonthRangeSelectionProps {
     persistent?: boolean;
 }
@@ -86,8 +62,8 @@ const emit = defineEmits<{
 
 const theme = useTheme();
 
-const { tt, getMonthShortName } = useI18n();
-const { yearRange, dateRange, isYearFirst, beginDateTime, endDateTime, getMonthSelectionValue, getFinalMonthRange } = useMonthRangeSelectionBase(props);
+const { tt } = useI18n();
+const { dateRange, beginDateTime, endDateTime, getFinalMonthRange } = useMonthRangeSelectionBase(props);
 
 const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
 const showState = computed<boolean>({
@@ -117,7 +93,7 @@ function cancel(): void {
 
 watch(() => props.minTime, (newValue) => {
     if (newValue) {
-        const yearMonth = getMonthSelectionValue(newValue);
+        const yearMonth = getYear0BasedMonthObjectFromString(newValue);
 
         if (yearMonth) {
             dateRange.value[0] = yearMonth;
@@ -127,7 +103,7 @@ watch(() => props.minTime, (newValue) => {
 
 watch(() => props.maxTime, (newValue) => {
     if (newValue) {
-        const yearMonth = getMonthSelectionValue(newValue);
+        const yearMonth = getYear0BasedMonthObjectFromString(newValue);
 
         if (yearMonth) {
             dateRange.value[1] = yearMonth;

src/components/desktop/MonthSelectionDialog.vue

@@ -15,20 +15,7 @@
             <v-card-text class="mb-md-4 w-100 d-flex justify-center">
                 <v-row class="match-height">
                     <v-col>
-                        <vue-date-picker inline month-picker auto-apply
-                                         month-name-format="long"
-                                         :clearable="false"
-                                         :dark="isDarkMode"
-                                         :year-range="yearRange"
-                                         :year-first="isYearFirst"
-                                         v-model="monthValue">
-                            <template #month="{ text }">
-                                {{ getMonthShortName(text) }}
-                            </template>
-                            <template #month-overlay-value="{ text }">
-                                {{ getMonthShortName(text) }}
-                            </template>
-                        </vue-date-picker>
+                        <month-picker :is-dark-mode="isDarkMode" v-model="monthValue"></month-picker>
                     </v-col>
                 </v-row>
             </v-card-text>
@@ -43,20 +30,24 @@
 </template>
 
 <script setup lang="ts">
-import { computed, watch } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { useTheme } from 'vuetify';
 
 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;
-}
+import { getYear0BasedMonthObjectFromUnixTime, getThisMonthFirstUnixTime } from '@/lib/datetime.ts';
+
+const props = defineProps<{
+    modelValue?: Year0BasedMonth;
+    title?: string;
+    hint?: string;
+    show: boolean;
+    persistent?: boolean;
+}>();
 
-const props = defineProps<DesktopMonthSelectionProps>();
 const emit = defineEmits<{
     (e: 'update:modelValue', value: Year0BasedMonth): void;
     (e: 'update:show', value: boolean): void;
@@ -65,8 +56,9 @@ const emit = defineEmits<{
 
 const theme = useTheme();
 
-const { tt, getMonthShortName } = useI18n();
-const { yearRange, monthValue, isYearFirst, getMonthSelectionValue, getYear0BasedMonth } = useMonthSelectionBase(props);
+const { tt } = useI18n();
+
+const monthValue = ref<Year0BasedMonth>(getYear0BasedMonthObjectFromUnixTime(getThisMonthFirstUnixTime()));
 
 const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
 const showState = computed<boolean>({
@@ -75,19 +67,12 @@ const showState = computed<boolean>({
 });
 
 function confirm(): void {
-    try {
-        const finalMonthRange = getYear0BasedMonth();
-
-        if (!finalMonthRange) {
-            return;
-        }
-
-        emit('update:modelValue', finalMonthRange);
-    } catch (ex: unknown) {
-        if (ex instanceof Error) {
-            emit('error', ex.message);
-        }
+    if (monthValue.value.year <= 0 || monthValue.value.month0base < 0) {
+        emit('error', 'Date is too early');
+        return;
     }
+
+    emit('update:modelValue', monthValue.value);
 }
 
 function cancel(): void {
@@ -96,21 +81,13 @@ function cancel(): void {
 
 watch(() => props.modelValue, (newValue) => {
     if (newValue) {
-        const yearMonth = getMonthSelectionValue(newValue);
-
-        if (yearMonth) {
-            monthValue.value = yearMonth;
-        }
+        monthValue.value = newValue;
     }
 });
 
 watch(() => props.show, (newValue) => {
     if (newValue && props.modelValue) {
-        const yearMonth = getMonthSelectionValue(props.modelValue);
-
-        if (yearMonth) {
-            monthValue.value = yearMonth;
-        }
+        monthValue.value = props.modelValue;
     }
 });
 </script>

src/components/mobile/DateRangeSelectionSheet.vue

@@ -14,31 +14,13 @@
                     <span>{{ endDateTime }}</span>
                 </p>
                 <slot></slot>
-                <vue-date-picker inline enable-seconds auto-apply
-                                 ref="datetimepicker"
-                                 month-name-format="long"
-                                 six-weeks="center"
-                                 class="justify-content-center margin-bottom"
-                                 :clearable="false"
-                                 :dark="isDarkMode"
-                                 :week-start="firstDayOfWeek"
-                                 :year-range="yearRange"
-                                 :day-names="dayNames"
-                                 :year-first="isYearFirst"
-                                 :is24="is24Hour"
-                                 :range="{ partialRange: false }"
-                                 :preset-dates="presetRanges"
-                                 v-model="dateRange">
-                    <template #month="{ text }">
-                        {{ getMonthShortName(text) }}
-                    </template>
-                    <template #month-overlay-value="{ text }">
-                        {{ getMonthShortName(text) }}
-                    </template>
-                    <template #am-pm-button="{ toggle, value }">
-                        <button class="dp__pm_am_button" tabindex="0" @click="toggle">{{ tt(`datetime.${value}.content`) }}</button>
-                    </template>
-                </vue-date-picker>
+                <date-time-picker ref="datetimepicker"
+                                  datetime-picker-class="justify-content-center margin-bottom"
+                                  :is-dark-mode="isDarkMode"
+                                  :enable-time-picker="true"
+                                  :preset-dates="presetRanges"
+                                  v-model="dateRange">
+                </date-time-picker>
                 <f7-button large fill
                            :class="{ 'disabled': !dateRange[0] || !dateRange[1] }"
                            :text="tt('Continue')"
@@ -53,17 +35,14 @@
 </template>
 
 <script setup lang="ts">
+import DateTimePicker from '@/components/common/DateTimePicker.vue';
 import { computed, useTemplateRef } from 'vue';
-import VueDatePicker from '@vuepic/vue-datepicker';
 
 import { useI18n } from '@/locales/helpers.ts';
 import { useI18nUIComponents } from '@/lib/ui/mobile.ts';
 import { type CommonDateRangeSelectionProps, useDateRangeSelectionBase } from '@/components/base/DateRangeSelectionBase.ts';
 
 import { useEnvironmentsStore } from '@/stores/environment.ts';
-import { useUserStore } from '@/stores/user.ts';
-
-import { type WeekDayValue } from '@/core/datetime.ts';
 
 import {
     getLocalDatetimeFromUnixTime,
@@ -72,7 +51,7 @@ import {
     getBrowserTimezoneOffsetMinutes
 } from '@/lib/datetime.ts';
 
-type VueDatePickerType = InstanceType<typeof VueDatePicker>;
+type DateTimePickerType = InstanceType<typeof DateTimePicker>;
 
 const props = defineProps<CommonDateRangeSelectionProps>();
 const emit = defineEmits<{
@@ -80,16 +59,14 @@ const emit = defineEmits<{
     (e: 'dateRange:change', minUnixTime: number, maxUnixTime: number): void;
 }>();
 
-const { tt, getMonthShortName } = useI18n();
+const { tt } = useI18n();
 const { showToast } = useI18nUIComponents();
-const { yearRange, dateRange, dayNames, isYearFirst, is24Hour, beginDateTime, endDateTime, presetRanges, getFinalDateRange } = useDateRangeSelectionBase(props);
+const { dateRange, beginDateTime, endDateTime, presetRanges, getFinalDateRange } = useDateRangeSelectionBase(props);
 
 const environmentsStore = useEnvironmentsStore();
-const userStore = useUserStore();
 
-const datetimepicker = useTemplateRef<VueDatePickerType>('datetimepicker');
+const datetimepicker = useTemplateRef<DateTimePickerType>('datetimepicker');
 const isDarkMode = computed<boolean>(() => environmentsStore.framework7DarkMode || false);
-const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
 
 function confirm(): void {
     try {
@@ -121,10 +98,7 @@ function onSheetOpen(): void {
     }
 
     window.dispatchEvent(new Event('resize')); // fix vue-datepicker preset max-width
-
-    if (datetimepicker.value) {
-        datetimepicker.value.switchView('calendar');
-    }
+    datetimepicker.value?.switchView('calendar');
 }
 
 function onSheetClosed(): void {

src/components/mobile/DateSelectionSheet.vue

@@ -12,26 +12,12 @@
         </f7-toolbar>
         <f7-page-content>
             <div class="block block-outline no-margin no-padding">
-                <vue-date-picker inline auto-apply
-                                 month-name-format="long"
-                                 model-type="yyyy-MM-dd"
-                                 six-weeks="center"
-                                 class="justify-content-center"
-                                 :enable-time-picker="false"
-                                 :clearable="true"
-                                 :dark="isDarkMode"
-                                 :week-start="firstDayOfWeek"
-                                 :year-range="yearRange"
-                                 :day-names="dayNames"
-                                 :year-first="isYearFirst"
-                                 v-model="dateTime">
-                    <template #month="{ text }">
-                        {{ getMonthShortName(text) }}
-                    </template>
-                    <template #month-overlay-value="{ text }">
-                        {{ getMonthShortName(text) }}
-                    </template>
-                </vue-date-picker>
+                <date-time-picker datetime-picker-class="justify-content-center"
+                                  :is-dark-mode="isDarkMode"
+                                  :enable-time-picker="false"
+                                  :clearable="true"
+                                  v-model="dateTime">
+                </date-time-picker>
             </div>
         </f7-page-content>
     </f7-sheet>
@@ -43,11 +29,13 @@ import { ref, computed } from 'vue';
 import { useI18n } from '@/locales/helpers.ts';
 
 import { useEnvironmentsStore } from '@/stores/environment.ts';
-import { useUserStore } from '@/stores/user.ts';
 
-import { type TextualYearMonthDay, type WeekDayValue } from '@/core/datetime.ts';
-import { arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
-import { getAllowedYearRange } from '@/lib/datetime.ts';
+import { type TextualYearMonthDay } from '@/core/datetime.ts';
+
+import {
+    getLocalDateFromYearDashMonthDashDay,
+    getGregorianCalendarYearAndMonthFromLocalDate
+} from '@/lib/datetime.ts';
 
 const props = defineProps<{
     modelValue?: TextualYearMonthDay;
@@ -55,35 +43,30 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: 'update:modelValue', value: TextualYearMonthDay): void;
+    (e: 'update:modelValue', value: TextualYearMonthDay | ''): void;
     (e: 'update:show', value: boolean): void;
 }>();
 
-const { tt, getAllMinWeekdayNames, getMonthShortName, isLongDateMonthAfterYear } = useI18n();
+const { tt } = useI18n();
 
 const environmentsStore = useEnvironmentsStore();
-const userStore = useUserStore();
 
-const yearRange = ref<number[]>(getAllowedYearRange());
-const dateTime = ref<string>('');
+const dateTime = ref<Date | null>(null);
 
 const isDarkMode = computed<boolean>(() => environmentsStore.framework7DarkMode || false);
-const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
-const dayNames = computed<string[]>(() => arrangeArrayWithNewStartIndex(getAllMinWeekdayNames(), firstDayOfWeek.value));
-const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
 
 function clear(): void {
-    dateTime.value = '';
+    dateTime.value = null;
     confirm();
 }
 
 function confirm(): void {
-    emit('update:modelValue', dateTime.value as TextualYearMonthDay);
+    emit('update:modelValue', dateTime.value ? getGregorianCalendarYearAndMonthFromLocalDate(dateTime.value) : '');
     emit('update:show', false);
 }
 
 function onSheetOpen(): void {
-    dateTime.value = props.modelValue ?? '';
+    dateTime.value = props.modelValue ? getLocalDateFromYearDashMonthDashDay(props.modelValue) : null;
 }
 
 function onSheetClosed(): void {

src/components/mobile/DateTimeSelectionSheet.vue

@@ -12,27 +12,13 @@
         </f7-toolbar>
         <f7-page-content class="padding-bottom">
             <div class="block block-outline no-margin no-padding">
-                <vue-date-picker inline enable-seconds auto-apply
-                                 ref="datetimepicker"
-                                 month-name-format="long"
-                                 six-weeks="center"
-                                 class="justify-content-center"
-                                 :enable-time-picker="false"
-                                 :clearable="false"
-                                 :dark="isDarkMode"
-                                 :week-start="firstDayOfWeek"
-                                 :year-range="yearRange"
-                                 :day-names="dayNames"
-                                 :year-first="isYearFirst"
-                                 v-model="dateTime"
-                                 v-show="mode === 'date'">
-                    <template #month="{ text }">
-                        {{ getMonthShortName(text) }}
-                    </template>
-                    <template #month-overlay-value="{ text }">
-                        {{ getMonthShortName(text) }}
-                    </template>
-                </vue-date-picker>
+                <date-time-picker ref="datetimepicker"
+                                  datetime-picker-class="justify-content-center"
+                                  :is-dark-mode="isDarkMode"
+                                  :enable-time-picker="false"
+                                  v-model="dateTime"
+                                  v-show="mode === 'date'">
+                </date-time-picker>
             </div>
             <div class="block block-outline no-margin no-padding padding-vertical-half" v-show="mode === 'time'">
                 <div id="time-picker-container" class="time-picker-container">
@@ -115,8 +101,8 @@
 </template>
 
 <script setup lang="ts">
+import DateTimePicker from '@/components/common/DateTimePicker.vue';
 import { ref, computed, nextTick, useTemplateRef, watch } from 'vue';
-import VueDatePicker from '@vuepic/vue-datepicker';
 
 import { useI18n } from '@/locales/helpers.ts';
 import { useI18nUIComponents } from '@/lib/ui/mobile.ts';
@@ -137,7 +123,7 @@ import {
     getCombinedDateAndTimeValues
 } from '@/lib/datetime.ts';
 
-type VueDatePickerType = InstanceType<typeof VueDatePicker>;
+type DateTimePickerType = InstanceType<typeof DateTimePicker>;
 
 const props = defineProps<{
     modelValue: number;
@@ -150,11 +136,7 @@ const emit = defineEmits<{
     (e: 'update:show', value: boolean): void;
 }>();
 
-const {
-    tt,
-    getMonthShortName,
-    formatUnixTimeToLongDateTime
-} = useI18n();
+const { tt, formatUnixTimeToLongDateTime } = useI18n();
 const { showToast } = useI18nUIComponents();
 
 const {
@@ -163,11 +145,7 @@ const {
     isMinuteTwoDigits,
     isSecondTwoDigits,
     isMeridiemIndicatorFirst,
-    yearRange,
     meridiemItems,
-    firstDayOfWeek,
-    dayNames,
-    isYearFirst,
     getDisplayTimeValue,
     generateAllHours,
     generateAllMinutesOrSeconds
@@ -175,7 +153,7 @@ const {
 
 const environmentsStore = useEnvironmentsStore();
 
-const datetimepicker = useTemplateRef<VueDatePickerType>('datetimepicker');
+const datetimepicker = useTemplateRef<DateTimePickerType>('datetimepicker');
 
 let resetTimePickerItemPositionItemsClass: string | undefined = undefined;
 let resetTimePickerItemPositionItemClass: string | undefined = undefined;
@@ -455,9 +433,7 @@ function onSheetOpen(): void {
         });
     }
 
-    if (datetimepicker.value) {
-        datetimepicker.value.switchView('calendar');
-    }
+    datetimepicker.value?.switchView('calendar');
 }
 
 function onSheetClosed(): void {
@@ -465,8 +441,8 @@ function onSheetClosed(): void {
 }
 
 watch(mode, (newValue) => {
-    if (newValue === 'date' && datetimepicker.value) {
-        datetimepicker.value.switchView('calendar');
+    if (newValue === 'date') {
+        datetimepicker.value?.switchView('calendar');
     } else if (newValue === 'time') {
         nextTick(() => {
             initTimePickerStyle();

src/components/mobile/FiscalYearStartSelectionSheet.vue

@@ -12,29 +12,16 @@
         </f7-toolbar>
         <f7-page-content>
             <div class="block block-outline no-margin no-padding">
-                <vue-date-picker inline auto-apply disable-year-select
-                                 month-name-format="long"
-                                 model-type="MM-dd"
-                                 six-weeks="center"
-                                 class="justify-content-center"
-                                 :config="{ noSwipe: true }"
-                                 :month-change-on-scroll="false"
-                                 :enable-time-picker="false"
-                                 :min-date="allowedMinDate"
-                                 :max-date="allowedMaxDate"
-                                 :disabled-dates="disabledDates"
-                                 :clearable="false"
-                                 :dark="isDarkMode"
-                                 :week-start="firstDayOfWeek"
-                                 :day-names="dayNames"
-                                 v-model="selectedFiscalYearStartValue">
-                    <template #month="{ text }">
-                        {{ getMonthShortName(text) }}
-                    </template>
-                    <template #month-overlay-value="{ text }">
-                        {{ getMonthShortName(text) }}
-                    </template>
-                </vue-date-picker>
+                <date-time-picker datetime-picker-class="justify-content-center"
+                                  :is-dark-mode="isDarkMode"
+                                  :enable-time-picker="false"
+                                  :disable-year-select="true"
+                                  :no-swipe-and-scroll="true"
+                                  :min-date="allowedMinDate"
+                                  :max-date="allowedMaxDate"
+                                  :disabled-dates="disabledDates"
+                                  v-model="selectedFiscalYearStartValue">
+                </date-time-picker>
             </div>
         </f7-page-content>
     </f7-sheet>
@@ -67,7 +54,7 @@ interface MobileFiscalYearStartSelectionSheetEmits extends CommonFiscalYearStart
 const props = defineProps<MobileFiscalYearStartSelectionSheetProps>();
 const emit = defineEmits<MobileFiscalYearStartSelectionSheetEmits>();
 
-const { tt, getMonthShortName } = useI18n();
+const { tt } = useI18n();
 
 const environmentsStore = useEnvironmentsStore();
 const userStore = useUserStore();
@@ -78,8 +65,6 @@ const {
     selectedFiscalYearStartValue,
     allowedMinDate,
     allowedMaxDate,
-    firstDayOfWeek,
-    dayNames
 } = useFiscalYearStartSelectionBase(props);
 
 const isDarkMode = computed<boolean>(() => environmentsStore.framework7DarkMode || false);

src/components/mobile/MonthRangeSelectionSheet.vue

@@ -14,22 +14,8 @@
                     <span>{{ endDateTime }}</span>
                 </p>
                 <slot></slot>
-                <vue-date-picker inline month-picker auto-apply
-                                 month-name-format="long"
-                                 class="justify-content-center margin-bottom"
-                                 :clearable="false"
-                                 :dark="isDarkMode"
-                                 :year-range="yearRange"
-                                 :year-first="isYearFirst"
-                                 :range="{ partialRange: false }"
-                                 v-model="dateRange">
-                    <template #month="{ text }">
-                        {{ getMonthShortName(text) }}
-                    </template>
-                    <template #month-overlay-value="{ text }">
-                        {{ getMonthShortName(text) }}
-                    </template>
-                </vue-date-picker>
+                <month-picker month-picker-class="justify-content-center margin-bottom"
+                              :is-dark-mode="isDarkMode" v-model="dateRange"></month-picker>
                 <f7-button large fill
                            :class="{ 'disabled': !dateRange[0] || !dateRange[1] }"
                            :text="tt('Continue')"
@@ -54,15 +40,17 @@ import { useEnvironmentsStore } from '@/stores/environment.ts';
 
 import { type TextualYearMonth } from '@/core/datetime.ts';
 
+import { getYear0BasedMonthObjectFromString } from '@/lib/datetime.ts';
+
 const props = defineProps<CommonMonthRangeSelectionProps>();
 const emit = defineEmits<{
     (e: 'update:show', value: boolean): void;
     (e: 'dateRange:change', minYearMonth: TextualYearMonth | '', maxYearMonth: TextualYearMonth | ''): void;
 }>();
 
-const { tt, getMonthShortName } = useI18n();
+const { tt } = useI18n();
 const { showToast } = useI18nUIComponents();
-const { yearRange, dateRange, isYearFirst, beginDateTime, endDateTime, getMonthSelectionValue, getFinalMonthRange } = useMonthRangeSelectionBase(props);
+const { dateRange, beginDateTime, endDateTime, getFinalMonthRange } = useMonthRangeSelectionBase(props);
 
 const environmentsStore = useEnvironmentsStore();
 
@@ -90,7 +78,7 @@ function cancel(): void {
 
 function onSheetOpen(): void {
     if (props.minTime) {
-        const yearMonth = getMonthSelectionValue(props.minTime);
+        const yearMonth = getYear0BasedMonthObjectFromString(props.minTime);
 
         if (yearMonth) {
             dateRange.value[0] = yearMonth;
@@ -98,7 +86,7 @@ function onSheetOpen(): void {
     }
 
     if (props.maxTime) {
-        const yearMonth = getMonthSelectionValue(props.maxTime);
+        const yearMonth = getYear0BasedMonthObjectFromString(props.maxTime);
 
         if (yearMonth) {
             dateRange.value[1] = yearMonth;

src/components/mobile/MonthSelectionSheet.vue

@@ -9,21 +9,8 @@
             <div class="padding-horizontal padding-bottom">
                 <p class="no-margin-top" v-if="hint">{{ hint }}</p>
                 <slot></slot>
-                <vue-date-picker inline month-picker auto-apply
-                                 month-name-format="long"
-                                 class="justify-content-center margin-bottom"
-                                 :clearable="false"
-                                 :dark="isDarkMode"
-                                 :year-range="yearRange"
-                                 :year-first="isYearFirst"
-                                 v-model="monthValue">
-                    <template #month="{ text }">
-                        {{ getMonthShortName(text) }}
-                    </template>
-                    <template #month-overlay-value="{ text }">
-                        {{ getMonthShortName(text) }}
-                    </template>
-                </vue-date-picker>
+                <month-picker month-picker-class="justify-content-center margin-bottom"
+                              :is-dark-mode="isDarkMode" v-model="monthValue"></month-picker>
                 <f7-button large fill
                            :class="{ 'disabled': !monthValue }"
                            :text="tt('Continue')"
@@ -38,43 +25,43 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { ref, computed } from 'vue';
 
 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>();
+import { getYear0BasedMonthObjectFromUnixTime, getThisMonthFirstUnixTime } from '@/lib/datetime.ts';
+
+const props = defineProps<{
+    modelValue?: Year0BasedMonth;
+    title?: string;
+    hint?: string;
+    show: boolean;
+}>();
+
 const emit = defineEmits<{
     (e: 'update:modelValue', value: Year0BasedMonth): void;
     (e: 'update:show', value: boolean): void;
 }>();
 
-const { tt, getMonthShortName } = useI18n();
+const { tt } = useI18n();
 const { showToast } = useI18nUIComponents();
-const { yearRange, monthValue, isYearFirst, getMonthSelectionValue, getYear0BasedMonth } = useMonthSelectionBase(props);
 
 const environmentsStore = useEnvironmentsStore();
 
+const monthValue = ref<Year0BasedMonth>(getYear0BasedMonthObjectFromUnixTime(getThisMonthFirstUnixTime()));
 const isDarkMode = computed<boolean>(() => environmentsStore.framework7DarkMode || false);
 
 function confirm(): void {
-    try {
-        const finalMonthRange = getYear0BasedMonth();
-
-        if (!finalMonthRange) {
-            return;
-        }
-
-        emit('update:modelValue', finalMonthRange);
-    } catch (ex: unknown) {
-        if (ex instanceof Error) {
-            showToast(ex.message);
-        }
+    if (monthValue.value.year <= 0 || monthValue.value.month0base < 0) {
+        showToast('Date is too early');
+        return;
     }
+
+    emit('update:modelValue', monthValue.value);
 }
 
 function cancel(): void {
@@ -83,11 +70,7 @@ function cancel(): void {
 
 function onSheetOpen(): void {
     if (props.modelValue) {
-        const yearMonth = getMonthSelectionValue(props.modelValue);
-
-        if (yearMonth) {
-            monthValue.value = yearMonth;
-        }
+        monthValue.value = props.modelValue;
     }
 }