diff --git a/README.md b/README.md
index da0bfea..a2e4c54 100644
--- a/README.md
+++ b/README.md
@@ -47,5 +47,6 @@ export default {
 | placeholder     | String        |             | input placeholder text                |
 | width           | String/Number | 210         | input size                            |
 | disabledDays    | Array         | []          | Days in YYYY-MM-DD format to disable  |
+| showYearNav     | Boolean       | true        | Show the year nav in the calendar     |
 
 
diff --git a/datepicker/calendar-panel.vue b/datepicker/calendar-panel.vue
index 8ff6990..dfac1d5 100644
--- a/datepicker/calendar-panel.vue
+++ b/datepicker/calendar-panel.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="calendar">
     <div class="calendar-header">
-      <a class="calendar__prev-icon" @click="changeYear(-1)">&laquo;</a>
+      <a v-show="showYearNav" class="calendar__prev-icon" @click="changeYear(-1)">&laquo;</a>
       <a v-show="currentPanel === 'date'" class="calendar__prev-icon" @click="changeMonth(-1)">&lsaquo;</a>
-      <a class="calendar__next-icon" @click="changeYear(1)">&raquo;</a>
+      <a v-show="showYearNav" 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>
@@ -41,7 +41,14 @@ export default {
     endAt: null,
     value: null,
     show: Boolean,
-    disabledDays: Array
+    disabledDays: {
+      type: Array,
+      default: []
+    },
+    showYearNav: {
+      type: Boolean,
+      default: true
+    }
   },
   data () {
     const translation = this.$parent.translation
diff --git a/datepicker/index.vue b/datepicker/index.vue
index 93b06e9..9c12720 100644
--- a/datepicker/index.vue
+++ b/datepicker/index.vue
@@ -20,14 +20,14 @@
          ref="calendar"
          v-show="showPopup">
       <template v-if="!range">
-        <calendar-panel @select="showPopup = false" v-model="currentValue" :show="showPopup" :disabledDays="disabledDays"></calendar-panel>
+        <calendar-panel @select="showPopup = false" v-model="currentValue" :show="showPopup" :disabledDays="disabledDays" :showYearNav="showYearNav"></calendar-panel>
       </template>
       <template v-else>
         <div class="datepicker-top">
           <span v-for="range in ranges" @click="selectRange(range)">{{range.text}}</span>
         </div>
-        <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"></calendar-panel>
-        <calendar-panel style="width:50%;"  v-model="currentValue[1]" :start-at="currentValue[0]" :show="showPopup" :disabledDays="disabledDays"></calendar-panel>
+        <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"></calendar-panel>
+        <calendar-panel style="width:50%;"  v-model="currentValue[1]" :start-at="currentValue[0]" :show="showPopup" :disabledDays="disabledDays" :showYearNav="showYearNav"></calendar-panel>
       </template>
     </div>
   </div>
@@ -58,7 +58,14 @@ export default {
       default: 'zh'
     },
     value: null,
-    disabledDays: Array
+    disabledDays: {
+      type: Array,
+      default: []
+    },
+    showYearNav: {
+      type: Boolean,
+      default: true
+    }
   },
   data () {
     return {