Added change year list step

Author: ManukMinasyan

README.md

@@ -145,6 +145,7 @@ ___
 | isTypeable                   | Boolean         | false       | true        | Enable manually date typing function, working only with prop isModal                     |
 | changeMonthFunction                   | Boolean         | false       | true        | Enable changed month with list, function                   |
 | changeYearFunction                   | Boolean         | false       | true        | Enable changed year with list, function                   |
+| changeYearStep                   | Number         | 12       | 6        | Change year list step count                   |
 | applyStylesheet                   | Boolean         | true       | false        | Disable default styles                   |
 | markedDates                   | Array         | []       | ['10/12/2018', '12/12/2018'] OR [{date: '10/1/2019', class: 'marked-class'},{date: '12/1/2019', class: 'marked-class-2'}]        | Marked dates array                   |
 | markedDateRange                   | Object         | {start: false, end: false}       | {start: '12/12/2018', end: '20/12/2018'}        | Marked date with range                   |

package.json

@@ -6,7 +6,7 @@
   },
   "name": "vue-functional-calendar",
   "description": "Lightweight, high-performance calendar component based on Vue.js",
-  "version": "2.5.8",
+  "version": "2.5.9",
   "license": "MIT",
   "repository": {
     "type": "git",

src/Demo.vue

@@ -13,7 +13,8 @@
                             :disabled-dates="['10/10/2019']"
                             v-slot:default="props"
                             :is-auto-closeable="true"
-                            :is-modal="true"
+                            :is-modal="false"
+                            :change-year-step="5"
         >
             <span style="text-align: center">
             {{ props.day.day }}

src/components/FunctionalCalendar.vue

@@ -1,6 +1,7 @@
 <template>
     <div :class="{'vfc-styles-conditional-class': fConfigs.applyStylesheet}">
-        <div class="vfc-multiple-input" :class="{'vfc-dark': fConfigs.isDark}" v-if="fConfigs.isModal && fConfigs.isDateRange">
+        <div class="vfc-multiple-input" :class="{'vfc-dark': fConfigs.isDark}"
+             v-if="fConfigs.isModal && fConfigs.isDateRange">
             <input type="text" title="Start Date"
                    v-model="input.dateRange.start.date"
                    :placeholder="fConfigs.placeholder"
@@ -707,7 +708,9 @@
                 if (!this.allowPreDate)
                     return false;
 
-                this.calendar.currentDate = new Date(this.calendar.currentDate.getFullYear() - 1, this.calendar.currentDate.getMonth());
+                let step = this.showYearPicker ? this.fConfigs.changeYearStep : 1;
+
+                this.calendar.currentDate = new Date(this.calendar.currentDate.getFullYear() - step, this.calendar.currentDate.getMonth());
                 this.initCalendar();
                 this.$emit('changedYear', this.calendar.currentDate);
             },
@@ -718,7 +721,9 @@
                 if (!this.allowNextDate)
                     return false;
 
-                this.calendar.currentDate = new Date(this.calendar.currentDate.getFullYear() + 1, this.calendar.currentDate.getMonth());
+                let step = this.showYearPicker ? this.fConfigs.changeYearStep : 1;
+
+                this.calendar.currentDate = new Date(this.calendar.currentDate.getFullYear() + step, this.calendar.currentDate.getMonth());
                 this.initCalendar();
                 this.$emit('changedYear', this.calendar.currentDate);
             },

src/mixins/propsAndData.js

@@ -59,6 +59,10 @@ export const propsAndData = {
             type: Boolean,
             default: () => false
         },
+        changeYearStep: {
+            type: Number,
+            default: () => 12
+        },
         applyStylesheet: {
             type: Boolean,
             default: () => true
@@ -182,6 +186,7 @@ export const propsAndData = {
 
                 changeMonthFunction: false,
                 changeYearFunction: false,
+                changeYearStep: 12,
 
                 applyStylesheet: true,