Enhancement | Arrow buttons to ease selecting y/m/s

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

@@ -3,110 +3,137 @@
     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="left" :color=color @click="handlePrevYearsClick()" />
+        <v-b-arrow-button type="right" :color=color @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 { getMonthsShort } from '@/VueCtkDateTimePicker/modules/month'
+  import CustomButton from '@/VueCtkDateTimePicker/_subs/CustomButton'
+  import VBArrowButton from '@/components/arrow_button'
 
-const ArrayRange = (start, end) => {
-  return Array(end - start + 1).fill().map((_, idx) => {
-    const n = start + idx
-    return n
-  })
-}
+  const YEARS_ON_DISPLAY = 15
 
-export default {
-  name: 'YearMonthSelector',
-  components: {
-    CustomButton
-  },
-  props: {
-    locale: { type: String, default: null },
-    dark: { type: Boolean, default: null },
-    color: { type: String, default: null },
-    mode: { type: String, default: null },
-    month: { type: Object, default: null }
-  },
-  data () {
-    return {
-      months: null,
-      years: null
-    }
-  },
-  computed: {
-    currentMonth () {
-      return this.month.month
+  const ArrayRange = (start, end) => {
+    return Array(end - start + 1).fill().map((_, idx) => {
+      const n = start + idx
+      return n
+    })
+  }
+
+  export default {
+    name: 'YearMonthSelector',
+    components: {
+      CustomButton,
+      VBArrowButton
     },
-    currentYear () {
-      return this.month.year
+    props: {
+      locale: { type: String, default: null },
+      dark: { type: Boolean, default: null },
+      color: { type: String, default: null },
+      mode: { type: String, default: null },
+      month: { type: Object, default: null }
     },
-    isMonthMode () {
-      return this.mode === 'month'
-    }
-  },
-  mounted () {
-    if (this.isMonthMode) {
-      this.getMonths()
-    } else {
-      this.getYears()
-    }
-  },
-  methods: {
-    getMonths () {
-      this.years = null
-      this.months = getMonthsShort(this.locale)
+    data () {
+      return {
+        months: null,
+        years: null,
+        transitionYearsName: 'slide-next',
+        transitionKey: 0
+      }
     },
-    getYears () {
-      this.months = null
-      this.years = ArrayRange(this.month.year - 7, this.month.year + 7)
+    computed: {
+      currentMonth () {
+        return this.month.month
+      },
+      currentYear () {
+        return this.month.year
+      },
+      isMonthMode () {
+        return this.mode === 'month'
+      }
     },
-    selectMonth (monthNumber) {
-      this.$emit('input', { month: monthNumber, year: this.currentYear })
+    mounted () {
+      if (this.isMonthMode) {
+        this.getMonths()
+      } else {
+        this.getYears(this.month.year - Math.floor(YEARS_ON_DISPLAY / 2))
+      }
     },
-    selectYear (year) {
-      this.$emit('input', { month: this.currentMonth, year: year })
+    methods: {
+      getMonths () {
+        this.years = null
+        this.months = getMonthsShort(this.locale)
+      },
+      getYears (startYear) {
+        this.months = null
+        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++
+      }
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>
@@ -118,13 +145,50 @@ export default {
     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>
+</style>

src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/TimePicker.vue

@@ -16,6 +16,9 @@
         : column.type === 'hours' ? onScrollHours($event) : column.type === 'minutes' ? onScrollMinutes($event) : column.type === 'seconds' ? onScrollSeconds($event) : onScrollApms($event)
       "
     >
+      <div class="arrow-btn top-0">
+        <v-b-arrow-button  type="up" :color=color @click="handlePrevClick(column.type)"/> 
+      </div>
       <div>
         <div
           class="before"
@@ -46,11 +49,15 @@
           :style="[columnPadding]"
         />
       </div>
+      <div class="arrow-btn bottom-0">
+        <v-b-arrow-button type="down" @click="handleNextClick(column.type)"/> 
+      </div>
     </div>
   </div>
 </template>
 <script>
 import moment from 'moment'
+import VBArrowButton from "@/components/arrow_button"
 
 const ArrayHourRange = (start, end, twoDigit, isAfternoon, disabledHours, isTwelveFormat) => {
   return Array(end - start + 1).fill().map((_, idx) => {
@@ -104,6 +111,9 @@ const debounce = (fn, time) => {
 
 export default {
   name: 'TimePicker',
+  components: {
+    VBArrowButton,
+  },
   props: {
     value: { type: String, default: null },
     format: { type: String, default: null },
@@ -334,9 +344,25 @@ export default {
     this.initPositionView()
   },
   methods: {
+    handlePrevClick(type) {
+      if(this[type.slice(0, -1)] !== 0) {
+        this[type.slice(0, -1)]--; 
+      }
+      this.emitValue();
+    },  
+    handleNextClick(type) {
+      if(type === 'hours' && this.hour < 23) {
+        this.hour++;
+      } else if(type === 'minutes' && this.minute < 59) {
+        this.minute++;
+      } else if(type === 'seconds' && this.second < 59) {
+        this.second++;
+      }
+      this.emitValue();
+    },  
     getValue (scroll) {
       const itemHeight = 28
-      const scrollTop = scroll.target.scrollTop
+      const scrollTop = scroll.target.scrollTop -  18 // Remove arrow button height.
       return Math.round(scrollTop / itemHeight)
     },
     onScrollHours: debounce(function (scroll) {
@@ -501,6 +527,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+  .arrow-btn {
+    position: sticky;
+    background-color:white;
+    z-index: 1;
+    text-align: center;
+  }
+
   .time-picker-column::-webkit-scrollbar {
     display: none;
   }

src/assets/scss/helpers/_position.scss

@@ -0,0 +1,7 @@
+.top-0 {
+    top: 0;
+}
+
+.bottom-0 {
+    bottom: 0;
+}

src/assets/scss/helpers/index.scss

@@ -6,6 +6,7 @@
 @import "./_animation.scss";
 @import "./_typo.scss";
 @import "./_width_height.scss";
+@import "./_position.scss";
 
 *, *::before, *::after {
   box-sizing: border-box;