Сделала BaseCalendar

src/components/base/Calendar/BaseCalendar.vue

@@ -3,7 +3,7 @@
     component(
       v-bind:is="currentForm?.component",
       v-model:internal-date="internalDate",
-      v-model:external-date="value",
+      v-model:external-date="externalValue",
       :range="range",
       :start-year="startYear",
       :end-year="endYear",
@@ -19,7 +19,7 @@
         label="Отменить",
         size="14px",
         padding="10px 12px",
-        @click="currentForm?.cancelFunction"
+        @click="cancelChanges"
       )
       q-btn(
         color="primary",
@@ -56,10 +56,6 @@ export default {
       type: Function,
       default: () => {},
     },
-    // cancel: {
-    //   type: Function,
-    //   default: () => {},
-    // },
   },
   data() {
     return {
@@ -69,23 +65,20 @@ export default {
         {
           component: "CalendarDates",
           saveBtnLabel: "Сохранить",
-          cancelFunction: this.cancelExternalChanges,
           saveFunction: this.saveExternalChanges,
         },
         {
           component: "CalendarYears",
           saveBtnLabel: "Применить",
-          cancelFunction: this.cancelInternalChanges,
           saveFunction: this.applyInternalChanges,
         },
         {
           component: "CalendarMonths",
           saveBtnLabel: "Применить",
-          cancelFunction: this.cancelInternalChanges,
           saveFunction: this.applyInternalChanges,
         },
       ],
-      previousValue: null,
+      externalValue: null,
     };
   },
   computed: {
@@ -108,28 +101,29 @@ export default {
     changeForm(form) {
       this.currentForm = this.forms.find((elem) => elem.component === form);
     },
-    cancelExternalChanges() {
-      this.value = this.range
-        ? {
-            from: this.previousValue?.from?.clone(),
-            to: this.previousValue?.to?.clone(),
-          }
-        : this.previousValue;
-    },
-    cancelInternalChanges() {
+    changeDate() {
       if (this.range) {
-        this.value = {
-          from: this.previousValue?.from?.clone(),
-          to: this.previousValue?.to?.clone(),
+        this.internalDate = this.value?.from?.clone();
+        this.externalValue = {
+          from: this.value?.from?.clone(),
+          to: this.value?.to?.clone(),
         };
-        this.internalDate = this.previousValue?.from?.clone();
       } else {
-        this.value = this.previousValue;
-        this.internalDate = this.previousValue;
+        this.internalDate = this.value?.clone();
+        this.externalValue = this.value?.clone();
       }
+    },
+    cancelChanges() {
+      this.changeDate();
       this.changeForm("CalendarDates");
     },
     saveExternalChanges() {
+      if (this.range)
+        this.value = {
+          from: this.externalValue?.from?.clone(),
+          to: this.externalValue?.to?.clone(),
+        };
+      else this.value = this.externalValue?.clone();
       this.save();
     },
     applyInternalChanges() {
@@ -144,18 +138,7 @@ export default {
     },
   },
   mounted() {
-    if (this.value) {
-      if (this.range) {
-        this.internalDate = this.value?.from?.clone();
-        this.previousValue = {
-          from: this.value?.from?.clone(),
-          to: this.value?.to?.clone(),
-        };
-      } else {
-        this.internalDate = this.value?.clone();
-        this.previousValue = this.value?.clone();
-      }
-    }
+    if (this.value) this.changeDate();
     this.currentForm = this.forms[0];
   },
 };

src/components/base/Calendar/CalendarYears.vue

@@ -28,11 +28,6 @@ export default {
     endYear: Number,
     internalMonth: String,
   },
-  data() {
-    return {
-      previousDate: null,
-    };
-  },
   computed: {
     internalValue: {
       get() {
@@ -69,9 +64,14 @@ export default {
     selectYear(year) {
       this.internalValue = this.internalValue.clone().year(year);
     },
+    scrollToCurrentYear() {
+      document
+        .getElementById(parseInt(this.internalValue.format("YYYY"), 10))
+        .scrollIntoView({ block: "center", behavior: "smooth" });
+    },
   },
   mounted() {
-    this.previousDate = this.internalValue.clone();
+    this.scrollToCurrentYear();
   },
 };
 </script>

src/pages/newCalendar/components/CalendarHeader.vue

@@ -46,6 +46,7 @@
                 range,
                 :range-count="7",
                 :save="saveDatesChange",
+                :start-year="2000"
               )
       q-btn(
         color="secondary",
@@ -108,26 +109,16 @@ export default {
     previousWeek() {
       this.dates.from = this.dates.from.clone().subtract(1, "week");
       this.dates.to = this.dates.to.clone().subtract(1, "week");
-      this.changeSelectedDates(this.dates);
     },
     nextWeek() {
       this.dates.from = this.dates.from.clone().add(1, "week");
       this.dates.to = this.dates.to.clone().add(1, "week");
-      this.changeSelectedDates(this.dates);
     },
     ...mapActions({
       changeSelectedDates: "changeSelectedDates",
     }),
     saveDatesChange() {
       this.calendarVisibility = false;
-      if (
-        !this.dates?.from.isSame(this.selectedDates?.from) &&
-        !this.dates?.to.isSame(this.selectedDates?.to)
-      )
-        this.changeSelectedDates(this.dates);
-    },
-    cancelDatesChange() {
-      this.calendarVisibility = false;
     },
     initializeDates() {
       this.dates = {
@@ -137,19 +128,16 @@ export default {
     },
   },
   watch: {
-    // dates: {
-    //   deep: true,
-    //   handler(val) {
-    //     if (
-    //       !this.val?.from.isSame(this.selectedDates?.from) &&
-    //       !this.val?.to.isSame(this.selectedDates?.to)
-    //     )
-    //       this.changeSelectedDates(val);
-    //   },
-    // },
-    // calendarVisibility(val) {
-    //   if (val === false) this.initializeDates();
-    // }
+    dates: {
+      deep: true,
+      handler(val) {
+        if (
+          !this.val?.from.isSame(this.selectedDates?.from) &&
+          !this.val?.to.isSame(this.selectedDates?.to)
+        )
+          this.changeSelectedDates(val);
+      },
+    },
   },
   mounted() {
     this.initializeDates();