modify style

src/components/base/FiscalYearStartSelectionBase.ts

@@ -1,13 +1,18 @@
 import { ref, computed } from 'vue';
 
-import { type WeekDayValue } from '@/core/datetime.ts';
-import { FiscalYearStart } from '@/core/fiscalyear.ts';
-import { arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
-
 import { useI18n } from '@/locales/helpers.ts';
 
 import { useUserStore } from '@/stores/user.ts';
 
+import { type WeekDayValue } from '@/core/datetime.ts';
+import { FiscalYearStart } from '@/core/fiscalyear.ts';
+import { arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
+import {
+    getLocalDatetimeFromUnixTime,
+    getThisYearFirstUnixTime,
+    getThisYearLastUnixTime
+} from '@/lib/datetime.ts';
+
 export interface CommonFiscalYearStartSelectionProps {
     modelValue?: number;
     disabled?: boolean;
@@ -79,6 +84,9 @@ export function useFiscalYearStartSelectionBase(props: CommonFiscalYearStartSele
         return formatMonthDayToLongDay(fiscalYearStart.toMonthDashDayString());
     });
 
+    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));
 
@@ -90,6 +98,8 @@ export function useFiscalYearStartSelectionBase(props: CommonFiscalYearStartSele
         // computed states
         selectedFiscalYearStartValue,
         displayFiscalYearStartDate,
+        allowedMinDate,
+        allowedMaxDate,
         firstDayOfWeek,
         dayNames
     };

src/components/desktop/FiscalYearStartSelect.vue

@@ -16,12 +16,16 @@
                              month-name-format="long"
                              model-type="MM-dd"
                              six-weeks="center"
-                             :clearable="false"
+                             :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"
-                             :disabled-dates="disabledDates"
                              v-model="selectedFiscalYearStartValue"
                              >
                 <template #month="{ text }">
@@ -63,6 +67,8 @@ const {
     selectedFiscalYearStart,
     selectedFiscalYearStartValue,
     displayFiscalYearStartDate,
+    allowedMinDate,
+    allowedMaxDate,
     firstDayOfWeek,
     dayNames
 } = useFiscalYearStartSelectionBase(props);

src/components/mobile/FiscalYearStartSelectionSheet.vue

@@ -17,12 +17,16 @@
                                  model-type="MM-dd"
                                  six-weeks="center"
                                  class="justify-content-center"
-                                 :clearable="false"
+                                 :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"
-                                 :disabled-dates="disabledDates"
                                  v-model="selectedFiscalYearStartValue">
                     <template #month="{ text }">
                         {{ getMonthShortName(text) }}
@@ -72,6 +76,8 @@ const {
     disabledDates,
     selectedFiscalYearStart,
     selectedFiscalYearStartValue,
+    allowedMinDate,
+    allowedMaxDate,
     firstDayOfWeek,
     dayNames
 } = useFiscalYearStartSelectionBase(props);