zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

support calendar display type (Gregorian and Buddhist)

Browse Source
This commit is contained in:
MaysWind
2025-08-28 00:31:59 +08:00
parent c099443783
commit 411130db4e
47 changed files with 769 additions and 788 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/desktop/DateRangeSelectionDialog.vue
+8 -31
View File
@@ -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
+32 -45
View File
@@ -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
+9 -31
View File
@@ -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
+10 -29
View File
@@ -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
+8 -32
View File
@@ -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
+21 -44
View File
@@ -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>