From a13290a35f9dc25a0647afcc021ba2658f39d7cb Mon Sep 17 00:00:00 2001
From: Aaron Rubin <aaron@arkitech.net>
Date: Sat, 10 Jun 2017 22:32:47 -0400
Subject: [PATCH 1/6] Add disabledDays prop to accept array of dates to disable

---
 README.md                     |  3 ++-
 datepicker/calendar-panel.vue | 18 +++++++++++++++++-
 datepicker/index.vue          |  9 +++++----
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 20eb156..da0bfea 100644
--- a/README.md
+++ b/README.md
@@ -43,8 +43,9 @@ export default {
 |-----------------|---------------|-------------|---------------------------------------|
 | range           | Boolean       | false       | if true, the type is daterange        |
 | format          | String        | yyyy-MM-dd  | Date formatting string                |
-| lang            | String        | zh          | Translation (en/zh/es)      |
+| 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  |
 
 
diff --git a/datepicker/calendar-panel.vue b/datepicker/calendar-panel.vue
index d0f0888..8ff6990 100644
--- a/datepicker/calendar-panel.vue
+++ b/datepicker/calendar-panel.vue
@@ -40,7 +40,8 @@ export default {
     startAt: null,
     endAt: null,
     value: null,
-    show: Boolean
+    show: Boolean,
+    disabledDays: Array
   },
   data () {
     const translation = this.$parent.translation
@@ -91,12 +92,14 @@ export default {
           const date = new Date(time.getFullYear(), time.getMonth(), day)
           return {
             title: date.toLocaleDateString(),
+            iso: cal.isoDate(date),
             date,
             day,
             classes
           }
         })
       }
+      var cal = this;
       const time = new Date(this.now)
       time.setDate(0) // 把时间切换到上个月最后一天
       const lastMonthLength = time.getDay() + 1  // time.getDay() 0是星期天, 1是星期一 ...
@@ -121,6 +124,15 @@ export default {
       }
       this.dates = result
     },
+    isoDate(date) {
+      function doubleDigits(num) {
+        if ( parseInt(num) < 10 ) {
+          return '0'+num;
+        }
+        return num;
+      }
+      return date.getFullYear()+'-'+doubleDigits((date.getMonth()+1))+'-'+doubleDigits(date.getDate());
+    },
     getClasses (cell) {
       const classes = []
       const cellTime = cell.date.getTime()
@@ -131,6 +143,10 @@ export default {
 
       classes.push(cell.classes)
 
+      if ( typeof this.disabledDays.find(function(disabledDate) { return disabledDate === cell.iso } ) !== 'undefined' ) {
+        classes.push('disabled');
+      }
+
       if (cellTime === today) {
         classes.push('today')
       }
diff --git a/datepicker/index.vue b/datepicker/index.vue
index 0e0fe5d..93b06e9 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"></calendar-panel>
+        <calendar-panel @select="showPopup = false" v-model="currentValue" :show="showPopup" :disabledDays="disabledDays"></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"></calendar-panel>
-        <calendar-panel style="width:50%;"  v-model="currentValue[1]" :start-at="currentValue[0]" :show="showPopup"></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"></calendar-panel>
+        <calendar-panel style="width:50%;"  v-model="currentValue[1]" :start-at="currentValue[0]" :show="showPopup" :disabledDays="disabledDays"></calendar-panel>
       </template>
     </div>
   </div>
@@ -57,7 +57,8 @@ export default {
       type: String,
       default: 'zh'
     },
-    value: null
+    value: null,
+    disabledDays: Array
   },
   data () {
     return {

From fe36d75c13d937e8c14e575e003eb0da87b02b44 Mon Sep 17 00:00:00 2001
From: "Aaron J. Rubin" <aaron@arkitech.net>
Date: Mon, 12 Jun 2017 08:24:16 -0400
Subject: [PATCH 2/6] Add default empty array for disabledDays, add showYearNav
 prop

---
 README.md                     |  1 +
 datepicker/calendar-panel.vue | 13 ++++++++++---
 datepicker/index.vue          | 15 +++++++++++----
 3 files changed, 22 insertions(+), 7 deletions(-)

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 {

From 42e7853018abd1d01f9527c3fcabb83e028af80f Mon Sep 17 00:00:00 2001
From: "Aaron J. Rubin" <aaron@arkitech.net>
Date: Mon, 12 Jun 2017 14:10:51 -0400
Subject: [PATCH 3/6] Update default to me a function

---
 datepicker/calendar-panel.vue | 2 +-
 datepicker/index.vue          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/datepicker/calendar-panel.vue b/datepicker/calendar-panel.vue
index dfac1d5..5ef8ec8 100644
--- a/datepicker/calendar-panel.vue
+++ b/datepicker/calendar-panel.vue
@@ -43,7 +43,7 @@ export default {
     show: Boolean,
     disabledDays: {
       type: Array,
-      default: []
+      default: function () { return [] }
     },
     showYearNav: {
       type: Boolean,
diff --git a/datepicker/index.vue b/datepicker/index.vue
index 9c12720..163547b 100644
--- a/datepicker/index.vue
+++ b/datepicker/index.vue
@@ -60,7 +60,7 @@ export default {
     value: null,
     disabledDays: {
       type: Array,
-      default: []
+      default: function () { return [] }
     },
     showYearNav: {
       type: Boolean,

From 7427c795c36bc61ca36095b676cee01b499fe86d Mon Sep 17 00:00:00 2001
From: "Aaron J. Rubin" <aaron@arkitech.net>
Date: Wed, 14 Jun 2017 15:37:47 -0400
Subject: [PATCH 4/6] Add notBefore and notAfter props to optionally disable
 all dates before / after a given date

---
 README.md                     | 20 +++++++++++---------
 datepicker/calendar-panel.vue | 13 +++++++++++++
 datepicker/index.vue          | 35 ++++++++++++++++++++++++++++++++---
 3 files changed, 56 insertions(+), 12 deletions(-)

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 () {

From bd85c96bfc57ab612b404a1dec17954567484f7b Mon Sep 17 00:00:00 2001
From: "Aaron J. Rubin" <aaron@arkitech.net>
Date: Wed, 14 Jun 2017 15:40:56 -0400
Subject: [PATCH 5/6] Bump version number

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 39bb1ac..f85830a 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "vue2-datepicker",
   "description": "A Datepicker Component For Vue2",
   "main": "datepicker/index.vue",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "scripts": {
     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"

From 2f622cb8c92c4c1fec704f80af563f9e7a8e104a Mon Sep 17 00:00:00 2001
From: "Aaron J. Rubin" <aaron@arkitech.net>
Date: Fri, 16 Jun 2017 17:12:52 -0400
Subject: [PATCH 6/6] Set to 0 hour, compare on 0 hour for notAfter, bump
 version

---
 datepicker/calendar-panel.vue | 4 ++--
 package.json                  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/datepicker/calendar-panel.vue b/datepicker/calendar-panel.vue
index edab0e7..5607d98 100644
--- a/datepicker/calendar-panel.vue
+++ b/datepicker/calendar-panel.vue
@@ -104,7 +104,7 @@ export default {
       function getCalendar (time, firstday, length, classes) {
         return Array.apply(null, { length }).map((v, i) => { // eslint-disable-line
           let day = firstday + i
-          const date = new Date(time.getFullYear(), time.getMonth(), day)
+          const date = new Date(time.getFullYear(), time.getMonth(), day, 0, 0, 0)
           return {
             title: date.toLocaleDateString(),
             iso: cal.isoDate(date),
@@ -162,7 +162,7 @@ export default {
         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())
+        (this.notAfter !== '' && cell.date.getTime() > (new Date(this.notAfter+' 00:00:00')).getTime())
       ) {
         classes.push('disabled');
       }
diff --git a/package.json b/package.json
index f85830a..bb7cf41 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "vue2-datepicker",
   "description": "A Datepicker Component For Vue2",
   "main": "datepicker/index.vue",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "scripts": {
     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"