mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-15 07:27:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

calendar display type supports Gregorian with Chinese

Browse Source
This commit is contained in:
MaysWind
2025-09-06 01:06:31 +08:00
parent e15a5617e6
commit 8368b02be8
45 changed files with 38451 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/common/DateTimePicker.vue
+56 -4
View File
@@ -3,7 +3,7 @@
inline auto-apply
enable-seconds
six-weeks="center"
:class="datetimePickerClass"
:class="`datetime-picker ${showAlternateDates && alternateCalendarType ? 'datetime-picker-with-alternate-date' : ''} ${datetimePickerClass}`"
:config="noSwipeAndScroll ? { noSwipe: true } : undefined"
:dark="isDarkMode"
:vertical="vertical"
@@ -35,7 +35,10 @@
{{ getDisplayMonth(value) }}
</template>
<template #day="{ date }">
{{ getDisplayDay(date) }}
<div class="datetime-picker-display-dates">
<span>{{ getDisplayDay(date) }}</span>
<span class="datetime-picker-alternate-date" v-if="showAlternateDates && alternateCalendarType && getAlternateDate(date)">{{ getAlternateDate(date) }}</span>
</div>
</template>
<template #am-pm-button="{ toggle, value }">
<button class="dp__pm_am_button" tabindex="0" @click="toggle">{{ tt(`datetime.${value}.content`) }}</button>
@@ -51,7 +54,8 @@ import { useI18n } from '@/locales/helpers.ts';
import { useUserStore } from '@/stores/user.ts';
import { type PresetDateRange, type WeekDayValue } from '@/core/datetime.ts';
import type { CalendarType } from '@/core/calendar.ts';
import type { PresetDateRange, WeekDayValue } from '@/core/datetime.ts';
import { isArray, arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
import { getAllowedYearRange, getYearMonthDayDateTime } from '@/lib/datetime.ts';
@@ -70,6 +74,7 @@ const props = defineProps<{
minDate?: Date;
maxDate?: Date;
disabledDates?: (date: Date) => boolean;
showAlternateDates?: boolean;
presetRanges?: PresetDateRange[];
}>();
@@ -80,11 +85,13 @@ const emit = defineEmits<{
const {
tt,
getAllMinWeekdayNames,
getCurrentCalendarDisplayType,
isLongDateMonthAfterYear,
isLongTime24HourFormat,
getCalendarShortYearFromUnixTime,
getCalendarShortMonthFromUnixTime,
getCalendarDayOfMonthFromUnixTime
getCalendarDayOfMonthFromUnixTime,
getCalendarAlternateDate
} = useI18n();
const userStore = useUserStore();
@@ -97,6 +104,7 @@ const dayNames = computed<string[]>(() => arrangeArrayWithNewStartIndex(getAllMi
const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
const is24Hour = computed<boolean>(() => isLongTime24HourFormat());
const alternateCalendarType = computed<CalendarType | undefined>(() => getCurrentCalendarDisplayType().secondaryCalendarType);
const dateTime = computed<SupportedModelValue>({
get: () => props.modelValue,
@@ -105,6 +113,18 @@ const dateTime = computed<SupportedModelValue>({
const isDateRange = computed<boolean>(() => isArray(props.modelValue));
function getAlternateDate(date: Date): string | undefined {
if (!props.showAlternateDates) {
return undefined;
}
return getCalendarAlternateDate({
year: date.getFullYear(),
month: date.getMonth() + 1,
day: date.getDate()
})?.displayDate;
};
function switchView(viewType: MenuView): void {
datetimepicker.value?.switchView(viewType);
}
@@ -131,3 +151,35 @@ defineExpose({
switchView
});
</script>
<style>
.datetime-picker-display-dates {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.datetime-picker-alternate-date {
margin-top: -2px;
opacity: 0.5;
font-size: 0.8rem;
}
.dp__cell_disabled .datetime-picker-alternate-date,
.dp__cell_offset .datetime-picker-alternate-date {
opacity: 0.8;
}
.dp__main.datetime-picker .dp__calendar .dp__calendar_row > .dp__calendar_item .datetime-picker-display-dates > span.datetime-picker-alternate-date {
display: block;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dp__main.datetime-picker.datetime-picker-with-alternate-date .dp__calendar .dp__calendar_row {
--dp-cell-size: 45px;
}
</style>
src/components/common/TransactionCalendar.vue
+37 -3
View File
@@ -1,7 +1,7 @@
<template>
<vue-date-picker inline auto-apply
model-type="yyyy-MM-dd"
:class="`transaction-calendar ${calendarClass}`"
:class="`transaction-calendar ${alternateDates ? 'transaction-calendar-with-alternate-date' : ''} ${calendarClass}`"
:config="{ noSwipe: true }"
:readonly="readonly"
:dark="isDarkMode"
@@ -21,6 +21,7 @@
<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-alternate-date" v-if="alternateDates && alternateDates[`${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`]">{{ alternateDates[`${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`] }}</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>
@@ -35,7 +36,7 @@ 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 type { CalendarAlternateDate, TextualYearMonthDay, WeekDayValue } from '@/core/datetime.ts';
import { INCOMPLETE_AMOUNT_SUFFIX } from '@/consts/numeral.ts';
import { arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
@@ -69,6 +70,7 @@ const {
getAllLongWeekdayNames,
getAllShortWeekdayNames,
getCalendarDayOfMonthFromUnixTime,
getCalendarAlternateDates,
formatAmountToLocalizedNumeralsWithCurrency
} = useI18n();
@@ -82,6 +84,28 @@ const dateTime = computed<TextualYearMonthDay | ''>({
set: (value: TextualYearMonthDay | '') => emit('update:modelValue', value)
});
const alternateDates = computed<Record<TextualYearMonthDay, string> | undefined>(() => {
const yearMonthDay = props.modelValue ? props.modelValue.split('-') : null;
if (!yearMonthDay || yearMonthDay.length !== 3) {
return undefined;
}
const allDates: CalendarAlternateDate[] | undefined = getCalendarAlternateDates({ year: parseInt(yearMonthDay[0]), month1base: parseInt(yearMonthDay[1]) })
if (!allDates) {
return undefined;
}
const ret: Record<TextualYearMonthDay, string> = {};
for (const alternateDate of allDates) {
ret[`${alternateDate.year}-${alternateDate.month}-${alternateDate.day}`] = alternateDate.displayDate;
}
return ret;
});
function noTransactionInMonthDay(date: Date): boolean {
const dateTime = parseDateTimeFromUnixTime(getActualUnixTimeForStore(getUnixTimeFromLocalDatetime(date), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes()));
return !props.dailyTotalAmounts || !props.dailyTotalAmounts[dateTime.getGregorianCalendarDay()];
@@ -105,7 +129,17 @@ function getDisplayDay(date: Date): string {
justify-content: center;
}
.transaction-calendar.dp__main .dp__calendar .dp__calendar_row > .dp__calendar_item .transaction-calendar-daily-amounts > span.transaction-calendar-daily-amount {
.transaction-calendar-alternate-date {
margin-top: -3px;
opacity: 0.5;
}
.dp__cell_disabled .transaction-calendar-alternate-date {
opacity: 0.8;
}
.dp__main.transaction-calendar .dp__calendar .dp__calendar_row > .dp__calendar_item .transaction-calendar-daily-amounts > span.transaction-calendar-alternate-date,
.dp__main.transaction-calendar .dp__calendar .dp__calendar_row > .dp__calendar_item .transaction-calendar-daily-amounts > span.transaction-calendar-daily-amount {
display: block;
width: 100%;
overflow: hidden;
src/components/desktop/DateRangeSelectionDialog.vue
+1
View File
@@ -22,6 +22,7 @@
:enable-time-picker="true"
:vertical="true"
:preset-dates="presetRanges"
:show-alternate-dates="true"
v-model="dateRange">
</date-time-picker>
</v-card-text>
src/components/desktop/DateSelect.vue
+1
View File
@@ -16,6 +16,7 @@
<date-time-picker :is-dark-mode="isDarkMode"
:enable-time-picker="false"
:clearable="true"
:show-alternate-dates="true"
v-model="dateTime">
</date-time-picker>
</template>
src/components/desktop/DateTimeSelect.vue
+1
View File
@@ -15,6 +15,7 @@
<date-time-picker :is-dark-mode="isDarkMode"
:enable-time-picker="false"
:vertical="true"
:show-alternate-dates="true"
v-model="dateTime">
</date-time-picker>
<div class="date-time-select-time-picker-container">
src/components/mobile/DateRangeSelectionSheet.vue
+1
View File
@@ -19,6 +19,7 @@
:is-dark-mode="isDarkMode"
:enable-time-picker="true"
:preset-dates="presetRanges"
:show-alternate-dates="true"
v-model="dateRange">
</date-time-picker>
<f7-button large fill
src/components/mobile/DateSelectionSheet.vue
+1
View File
@@ -16,6 +16,7 @@
:is-dark-mode="isDarkMode"
:enable-time-picker="false"
:clearable="true"
:show-alternate-dates="true"
v-model="dateTime">
</date-time-picker>
</div>
src/components/mobile/DateTimeSelectionSheet.vue
+1
View File
@@ -16,6 +16,7 @@
datetime-picker-class="justify-content-center"
:is-dark-mode="isDarkMode"
:enable-time-picker="false"
:show-alternate-dates="true"
v-model="dateTime"
v-show="mode === 'date'">
</date-time-picker>