微调

datepicker/calendar-panel.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="calendar">
     <div class="calendar-header">
-      <a v-show="showYearNav" class="calendar__prev-icon" @click="changeYear(-1)">&laquo;</a>
+      <a class="calendar__prev-icon" @click="changeYear(-1)">&laquo;</a>
       <a v-show="currentPanel === 'date'" class="calendar__prev-icon" @click="changeMonth(-1)">&lsaquo;</a>
-      <a v-show="showYearNav" class="calendar__next-icon" @click="changeYear(1)">&raquo;</a>
+      <a class="calendar__next-icon" @click="changeYear(1)">&raquo;</a>
       <a v-show="currentPanel === 'date'" class="calendar__next-icon" @click="changeMonth(1)">&rsaquo;</a>
       <a @click="showMonths">{{months[currentMonth]}}</a>
       <a @click="showYears">{{currentYear}}</a>
@@ -37,23 +37,7 @@ export default {
     startAt: null,
     endAt: null,
     value: null,
-    show: Boolean,
-    disabledDays: {
-      type: Array,
-      default: function () { return [] }
-    },
-    showYearNav: {
-      type: Boolean,
-      default: true
-    },
-    notBefore: {
-      type: String,
-      default: ''
-    },
-    notAfter: {
-      type: String,
-      default: ''
-    }
+    show: Boolean
   },
   data () {
     const translation = this.$parent.translation
@@ -142,9 +126,9 @@ export default {
       const endTime = this.endAt ? new Date(this.endAt).setHours(0, 0, 0, 0) : 0
       const today = new Date().setHours(0, 0, 0, 0)
 
-      if (this.disabledDays.some(v => +new Date(v) === +cell.date) ||
-        (this.notBefore !== '' && cell.date.getTime() < (new Date(this.notBefore)).getTime()) ||
-        (this.notAfter !== '' && cell.date.getTime() > (new Date(this.notAfter)).getTime())) {
+      if (this.$parent.disabledDays.some(v => +new Date(v) === +cell.date) ||
+        (this.$parent.notBefore !== '' && cell.date.getTime() < (new Date(this.$parent.notBefore)).getTime()) ||
+        (this.$parent.notAfter !== '' && cell.date.getTime() > (new Date(this.$parent.notAfter)).getTime())) {
         return 'disabled'
       }
 

datepicker/index.vue

@@ -22,11 +22,7 @@
       <template v-if="!range">
         <calendar-panel @select="showPopup = false"
                         v-model="currentValue"
-                        :show="showPopup"
-                        :disabledDays="disabledDays"
-                        :showYearNav="showYearNav"
-                        :notBefore="notBefore"
-                        :notAfter="notAfter"></calendar-panel>
+                        :show="showPopup"></calendar-panel>
       </template>
       <template v-else>
         <div class="datepicker-top">
@@ -35,20 +31,11 @@
         <calendar-panel style="width:50%;box-shadow:1px 0 rgba(0, 0, 0, .1)"
                         v-model="currentValue[0]"
                         :end-at="currentValue[1]"
-                        :show="showPopup"
-                        :disabledDays="disabledDays"
-                        :showYearNav="showYearNav"
-                        :notBefore="notBefore"
-                        :notAfter="notAfter"
-        ></calendar-panel>
+                        :show="showPopup"></calendar-panel>
         <calendar-panel style="width:50%;"
                         v-model="currentValue[1]"
                         :start-at="currentValue[0]"
-                        :show="showPopup"
-                        :disabledDays="disabledDays"
-                        :showYearNav="showYearNav"
-                        :notBefore="notBefore"
-                        :notAfter="notAfter"></calendar-panel>
+                        :show="showPopup"></calendar-panel>
       </template>
     </div>
   </div>
@@ -83,10 +70,6 @@ export default {
       type: Array,
       default: function () { return [] }
     },
-    showYearNav: {
-      type: Boolean,
-      default: true
-    },
     notBefore: {
       type: String,
       default: ''
@@ -124,7 +107,6 @@ export default {
     showPopup (val) {
       if (val) {
         this.$nextTick(this.displayPopup)
-        // this.displayPopup()
       }
     }
   },
@@ -146,9 +128,6 @@ export default {
     }
   },
   methods: {
-    selectDate (date) {
-
-    },
     closePopup () {
       this.showPopup = false
     },

demo/App.vue

@@ -2,7 +2,7 @@
   <div id="app">
     <div class="demo">
       <span class="label">default:</span>
-      <date-picker v-model="value1" lang="en"></date-picker>
+      <date-picker v-model="value1" lang="en" :not-after="notAfter"></date-picker>
     </div>
     <div class="demo">
       <span class="label">range:</span>