feat(calendar): show year select boxes above calendar

add showYearSelect API to support year select boxes above calendars to jump to a specific year

Author: ly525

src/components/Calendar.vue

@@ -5,7 +5,15 @@
         <th class="prev available" @click="$emit('clickPrevMonth')">
           <i :class="[arrowLeftClass]"></i>
         </th>
-        <th colspan="5" class="month">{{ monthName }} {{ year }}</th>
+        <th colspan="5" class="month">
+          {{ monthName }}
+          <!-- select year start -->
+          <select class="yearselect" v-model="activeYear" v-if="picker.showYearSelect">
+            <option v-for="(year, index) in RangeOfYear" :value="year" :key="index">{{year}}</option>
+          </select>
+          <span v-else>{{ activeYear }}</span>
+          <!-- select year end -->
+        </th>
         <th class="next available" @click="$emit('clickNextMonth')">
           <i :class="[arrowRightClass]"></i>
         </th>
@@ -34,15 +42,27 @@
 </template>
 
 <script>
-import moment from "moment";
+import moment,{ min } from "moment";
 
 function clean(momentDate) {
   return momentDate.clone().hour(0).minute(0).second(0).millisecond(0);
 }
 
+// _.range([start=0], end, [step=1])
+function range(start=0, end, step=1) {
+  const arr = [];
+  start = +start;
+  end = +end;
+  for (let i = start; i<=end; i=i+step) {
+    arr.push(i);
+  }
+  return arr;
+}
+
 export default {
   name: "calendar",
-  props: ["calendarMonth", "locale", "hoverStart", "hoverEnd", "start", "end"],
+  inject: ['picker'],
+  props: ["location", "calendarMonth", "locale", "hoverStart", "hoverEnd", "start", "end"],
   methods: {
     dayClass(date) {
       let dt = date.clone();
@@ -147,7 +167,30 @@ export default {
       }
 
       return calendar;
-    }
+    },
+    // if show year select
+    RangeOfYear () {
+      if (!this.picker.showYearSelect) return [];
+      // TODO 这边因为依赖计算属性：this.calendar 那么是否需要处理 this.calendar[1]为空的情况？
+      // const currentYear = this.calendar[1][1].year();
+
+      const picker = this.picker;
+      const maxYear = (picker.maxDate && picker.maxDate.year()) || picker.maxYear;
+      const minYear = (picker.minDate && picker.minDate.year()) || picker.minYear;
+      return range(minYear, maxYear, 1);
+    },
+    activeYear: {
+      get() {
+        return this.calendarMonth.year();
+      },
+      set(newYear) {
+        const calendarMonth = moment([newYear, this.month]);
+        this.$emit('clickYearSelect', {
+          location: this.location,
+          calendarMonth,
+        });
+      },
+    },
   },
   filters: {
     dateNum(value) {

src/components/Picker.vue

@@ -22,6 +22,7 @@
         ></calendar-ranges>
         <calendar
           class="calendar left"
+          location="left"
           :calendar-month="inside__leftCalendarMonth"
           :locale="locale"
           :start="inside__start"
@@ -32,9 +33,11 @@
           @clickPrevMonth="clickPrevMonth"
           @dateClick="dateClick"
           @hoverDate="hoverDate"
+          @clickYearSelect="clickYearSelect"
         ></calendar>
         <calendar
           class="calendar right"
+          location="right"
           :calendar-month="inside__rightCalendarMonth"
           :locale="locale"
           :start="inside__start"
@@ -45,6 +48,7 @@
           @clickPrevMonth="clickPrevMonth"
           @dateClick="dateClick"
           @hoverDate="hoverDate"
+          @clickYearSelect="clickYearSelect"
         ></calendar>
       </div>
     </transition>
@@ -93,6 +97,18 @@ export default {
       type: Boolean,
       default: false,
     },
+    showYearSelect: {
+      type: Boolean,
+      default: false,
+    },
+    minYear: {
+      type: String,
+      default: moment().subtract(100, 'year').format('YYYY'),
+    },
+    maxYear: {
+      type: String,
+      default: moment().add(100, 'year').format('YYYY'),
+    },
   },
   data() {
     let data = {
@@ -111,7 +127,9 @@ export default {
     };
     // TODO 这里的 props 究竟是放在 data 里面进行初始化好，还是放在生命周期中好呢？
     // https://github.com/ly525/blog/issues/252
+    // https://github.com/ly525/blog/issues/258
     data.inside__leftCalendarMonth = moment(this.startDate);
+    data.inside__rightCalendarMonth = moment(this.endDate);
     data.inside__start = moment(this.startDate);
     data.inside__end = moment(this.endDate);
     data.inside__hoverStart = moment(this.startDate);
@@ -130,6 +148,9 @@ export default {
     return data;
   },
   methods: {
+    clickYearSelect({location, calendarMonth}) {
+      this[`inside__${location}CalendarMonth`] = calendarMonth.clone();
+    },
     clickNextMonth() {
       // TODO 如果有 linkedCalendars，需要更新代码
       // moment.js 的 add 和 sub tract 的改变自身的行为没有被 watch 到，原因是什么呢？
@@ -196,9 +217,6 @@ export default {
     }
   },
   computed: {
-    inside__rightCalendarMonth() {
-      return this.inside__leftCalendarMonth.clone().add(1, 'month')
-    },
     startText() {
       return this.inside__start.format(this.locale.format);
     },
@@ -217,6 +235,12 @@ export default {
     inside__start (value) {
       this.inside__leftCalendarMonth = value.clone();
     },
+    inside__leftCalendarMonth: {
+      handler(leftMonth) {
+        this.inside__rightCalendarMonth = leftMonth.clone().add(1, 'month');
+      },
+      immediate: true,
+    },
     startDate(value) {
       this.inside__start = moment(value);
     },

src/styles/components/calendar.scss

@@ -21,15 +21,14 @@ table {
     border: 1px solid transparent;
     white-space: nowrap;
     cursor: pointer;
-
-    &:hover {
-      background-color: #eee;
-      border-color: transparent;
-      color: inherit;
-    }
   }
 }
 td {
+  &:hover {
+    background-color: #eee;
+    border-color: transparent;
+    color: inherit;
+  }
   &.today {
     font-weight: bold;
   }