diff --git a/README.md b/README.md
index a2e4c54..78d14c4 100644
--- a/README.md
+++ b/README.md
@@ -39,14 +39,16 @@ export default {
 ```
 ## Attributes
 
-| Prop            | Type          | Default     | Description                           |
-|-----------------|---------------|-------------|---------------------------------------|
-| range           | Boolean       | false       | if true, the type is daterange        |
-| format          | String        | yyyy-MM-dd  | Date formatting string                |
-| lang            | String        | zh          | Translation (en/zh/es)                |
-| 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     |
+| Prop            | Type          | Default     | Description                                       |
+|-----------------|---------------|-------------|---------------------------------------------------|
+| range           | Boolean       | false       | if true, the type is daterange                    |
+| format          | String        | yyyy-MM-dd  | Date formatting string                            |
+| lang            | String        | zh          | Translation (en/zh/es)                            |
+| 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                 |
+| notBefore       | String        | ''          | Disable all dates before date in YYY-MM-DD format |
+| notAfter        | String        | ''          | Disable all dates after date in YYY-MM-DD format  |
 
 
diff --git a/datepicker/calendar-panel.vue b/datepicker/calendar-panel.vue
index 5ef8ec8..edab0e7 100644
--- a/datepicker/calendar-panel.vue
+++ b/datepicker/calendar-panel.vue
@@ -48,6 +48,14 @@ export default {
     showYearNav: {
       type: Boolean,
       default: true
+    },
+    notBefore: {
+      type: String,
+      default: ''
+    },
+    notAfter: {
+      type: String,
+      default: ''
     }
   },
   data () {
@@ -152,6 +160,11 @@ export default {
 
       if ( typeof this.disabledDays.find(function(disabledDate) { return disabledDate === cell.iso } ) !== 'undefined' ) {
         classes.push('disabled');
+      } else if (
+        (this.notBefore !== '' && cell.date.getTime() < (new Date(this.notBefore)).getTime()) ||
+        (this.notAfter !== '' && cell.date.getTime() > (new Date(this.notAfter)).getTime())
+      ) {
+        classes.push('disabled');
       }
 
       if (cellTime === today) {
diff --git a/datepicker/index.vue b/datepicker/index.vue
index 163547b..231cf60 100644
--- a/datepicker/index.vue
+++ b/datepicker/index.vue
@@ -20,14 +20,35 @@
          ref="calendar"
          v-show="showPopup">
       <template v-if="!range">
-        <calendar-panel @select="showPopup = false" v-model="currentValue" :show="showPopup" :disabledDays="disabledDays" :showYearNav="showYearNav"></calendar-panel>
+        <calendar-panel @select="showPopup = false"
+                        v-model="currentValue"
+                        :show="showPopup"
+                        :disabledDays="disabledDays"
+                        :showYearNav="showYearNav"
+                        :notBefore="notBefore"
+                        :notAfter="notAfter"></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" :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>
+        <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>
+        <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>
       </template>
     </div>
   </div>
@@ -65,6 +86,14 @@ export default {
     showYearNav: {
       type: Boolean,
       default: true
+    },
+    notBefore: {
+      type: String,
+      default: ''
+    },
+    notAfter: {
+      type: String,
+      default: ''
     }
   },
   data () {