changes

components/datepicker/PickYear.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="columns is-mobile is-multiline mx-0">
+    <div class="column is-4 has-text-centered" v-for="(v,i) in years">
+    <span class="hyperlink" :class="i===0 || i===11? 'has-text-grey' : ''" @click="$emit('year', v)">{{ `${v}` }}</span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ['year', 'month', 'action'],
+  data() {
+    return {
+      years: []
+    }
+  },
+  created() {
+    this.years = [this.year]
+      for(let i = 1; i < 7; i++) {
+        this.years.push(this.year+i)
+        this.years.push(this.year-i)
+      }
+      this.years.sort(function(a, b) {return a - b;})
+      this.years = this.years.slice(0,12)
+      this.$emit('caption', `${this.years[1]}-${this.years[10]}`)
+  },
+  watch: {
+    action: function(newVal) {
+      if(newVal.name==='next') this.next()
+      if(newVal.name==='previous') this.previous()
+    }
+  },
+  methods: {
+    next() {
+      let year = this.years[this.years.length-1]
+      this.years = []
+      for(let i = 0; i < 12; i++) {
+        this.years.push(year+i)
+      }
+      this.years.sort(function(a, b) {return a - b;})
+      this.years = this.years.slice(0,12)
+      this.$emit('caption', `${this.years[1]}-${this.years[10]}`)
+    },
+    previous() {
+      let year = this.years[0]
+      this.years = []
+      for(let i = 0; i < 12; i++) {
+        this.years.push(year-i)
+      }
+      this.years.sort(function(a, b) {return a - b;})
+      this.years = this.years.slice(0,12)
+      this.$emit('caption', `${this.years[1]}-${this.years[10]}`)
+    }
+  }
+}
+</script>