support calendar display type (Gregorian and Buddhist)

2026-05-15 23:47:33 +08:00 · 2025-08-28 00:31:59 +08:00
parent c099443783
commit 411130db4e
47 changed files with 769 additions and 788 deletions
@@ -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>