Added the ability to switch years

src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/DatePicker/_subs/YearMonthSelector.vue

@@ -3,49 +3,61 @@
     class="year-month-selector flex flex-direction-column"
     :class="{'dark': dark}"
   >
-    <div class="flex justify-content-right">
+    <div class="year-month-selector__actions">
+      <div v-if="!this.isMonthMode" class="chang-years-section">
+        <v-b-arrow-button type="prev" @click="handlePrevYearsClick()" />
+        <v-b-arrow-button type="next" @click="handleNextYearsClick()" />
+      </div>
+
       <CustomButton
         :color="dark ? '#757575' : '#424242'"
         :dark="dark"
         with-border
         @click="$emit('back')"
+        class="back-button"
       >
         <span class="fs-16">
           ✕
         </span>
       </CustomButton>
     </div>
-    <div class="flex-1 flex flex-wrap justify-content-between align-center">
-      <CustomButton
-        v-for="(m, index) in months"
-        :key="index"
-        :color="color"
-        :selected="currentMonth === index"
-        :dark="dark"
-        class="month-button"
-        with-border
-        @click="selectMonth(index)"
-      >
-        {{ m }}
-      </CustomButton>
-      <CustomButton
-        v-for="year in years"
-        :key="year"
-        :color="color"
-        :dark="dark"
-        :selected="currentYear === year"
-        with-border
-        @click="selectYear(year)"
-      >
-        {{ year }}
-      </CustomButton>
-    </div>
+    <TransitionGroup :name="transitionYearsName" tag="div">
+      <div :key="transitionKey" class="years-month-wrapper">
+        <CustomButton
+          v-for="(m, index) in months"
+          :key="index"
+          :color="color"
+          :selected="currentMonth === index"
+          :dark="dark"
+          class="month-button"
+          with-border
+          @click="selectMonth(index)"
+        >
+          {{ m }}
+        </CustomButton>
+        <CustomButton
+          v-for="year in years"
+          :key="year"
+          :color="color"
+          :dark="dark"
+          :selected="currentYear === year"
+          with-border
+          class="year-button"
+          @click="selectYear(year)"
+        >
+          {{ year }}
+        </CustomButton>
+      </div>
+    </TransitionGroup>
   </div>
 </template>
 
 <script>
   import { getMonthsShort } from '@/VueCtkDateTimePicker/modules/month'
   import CustomButton from '@/VueCtkDateTimePicker/_subs/CustomButton'
+  import VBArrowButton from '@/components/arrow_button'
+
+  const YEARS_ON_DISPLAY = 15
 
   const ArrayRange = (start, end) => {
     return Array(end - start + 1).fill().map((_, idx) => {
@@ -57,7 +69,8 @@
   export default {
     name: 'YearMonthSelector',
     components: {
-      CustomButton
+      CustomButton,
+      VBArrowButton
     },
     props: {
       locale: { type: String, default: null },
@@ -69,7 +82,9 @@
     data () {
       return {
         months: null,
-        years: null
+        years: null,
+        transitionYearsName: 'slide-next',
+        transitionKey: 0
       }
     },
     computed: {
@@ -87,23 +102,35 @@
       if (this.isMonthMode) {
         this.getMonths()
       } else {
-        this.getYears()
+        this.getYears(this.month.year - Math.floor(YEARS_ON_DISPLAY / 2))
       }
     },
     methods: {
       getMonths () {
         this.years = null
         this.months = getMonthsShort(this.locale)
       },
-      getYears () {
+      getYears (startYear) {
         this.months = null
-        this.years = ArrayRange(this.month.year - 7, this.month.year + 7)
+        this.years = ArrayRange(startYear, startYear + YEARS_ON_DISPLAY - 1)
       },
       selectMonth (monthNumber) {
         this.$emit('input', { month: monthNumber, year: this.currentYear })
       },
       selectYear (year) {
         this.$emit('input', { month: this.currentMonth, year: year })
+      },
+
+      handlePrevYearsClick() {
+        this.transitionYearsName = 'slideprev'
+        this.getYears(this.years[0] - YEARS_ON_DISPLAY)
+        this.transitionKey++
+      },
+
+      handleNextYearsClick() {
+        this.transitionYearsName = 'slidenext'
+        this.getYears(this.years[this.years.length - 1] + 1)
+        this.transitionKey++
       }
     }
   }
@@ -118,13 +145,50 @@
     left: 0;
     right: 0;
     color: #424242;
-    padding: 10px;
+    padding-bottom: 10px;
+    overflow: hidden;
+
     &.dark {
       color: white;
       background-color: #424242;
     }
     .month-button {
       text-transform: capitalize;
     }
+
+    .back-button {
+      margin-left: auto;
+    }
+
+    &__actions {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 10px;
+      height: 56px;
+
+      .chang-years-section {
+        display: flex;
+        align-items: center;
+        gap: 15px;
+      }
+    }
+
+    .years-month-wrapper {
+      margin-top: 15px;
+      padding: 0 10px;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      row-gap: 10px;
+      column-gap: 0;
+      width: 100%;
+      box-sizing: border-box;
+
+      .month-button,
+      .year-button {
+        width: 30%;
+      }
+    }
   }
 </style>

src/components/arrow_button.vue

@@ -0,0 +1,60 @@
+<template>
+  <button
+    type="button"
+    tabindex="-1"
+    class="arrow-button"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <svg viewBox="0 0 1000 1000">
+      <path :d="arrowPath" />
+    </svg>
+  </button>
+</template>
+
+<script>
+const TYPES = {
+  prev: 'prev',
+  next: 'next'
+}
+
+const SVG_PATHS = {
+  [TYPES.prev]: 'M336.2 274.5l-210.1 210h805.4c13 0 23 10 23 23s-10 23-23 23H126.1l210.1 210.1c11 11 11 21 0 32-5 5-10 7-16 7s-11-2-16-7l-249.1-249c-11-11-11-21 0-32l249.1-249.1c21-21.1 53 10.9 32 32z',
+  [TYPES.next]: 'M694.4 242.4l249.1 249.1c11 11 11 21 0 32L694.4 772.7c-5 5-10 7-16 7s-11-2-16-7c-11-11-11-21 0-32l210.1-210.1H67.1c-13 0-23-10-23-23s10-23 23-23h805.4L662.4 274.5c-21-21.1 11-53.1 32-32.1z'
+}
+
+const DEFAULT_TYPE = TYPES.prev
+
+export default {
+  name: 'VBArrowButton',
+
+  inheritAttrs: false,
+
+  props: {
+    type: {
+      type: String,
+      default: 'next',
+      validator: (value) => {
+        return Object.keys(TYPES).includes(value)
+      }
+    }
+  },
+
+  computed: {
+    arrowPath () {
+      return SVG_PATHS[this.type] || SVG_PATHS[DEFAULT_TYPE]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.arrow-button {
+  border: none;
+  background: initial;
+  padding: 0;
+  cursor: pointer;
+  width: 17px;
+  height: 17px;
+}
+</style>