Merge pull request #6 from Arkitecht/master

Add additional props

README.md

@@ -39,12 +39,16 @@ export default {
 ```
 ## Attributes
 
-| Prop            | Type          | Default     | Description                           |
+| Prop            | Type          | Default     | Description                                       |
-|-----------------|---------------|-------------|---------------------------------------|
+|-----------------|---------------|-------------|---------------------------------------------------|
-| range           | Boolean       | false       | if true, the type is daterange        |
+| range           | Boolean       | false       | if true, the type is daterange                    |
-| format          | String        | yyyy-MM-dd  | Date formatting string                |
+| 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                |
+| placeholder     | String        |             | input placeholder text                            |
-| width           | String/Number | 210         | input size                            |
+| 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  |
 
 

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>
@@ -40,7 +40,23 @@ export default {
     startAt: null,
     endAt: null,
     value: null,
-    show: Boolean
+    show: Boolean,
+    disabledDays: {
+      type: Array,
+      default: function () { return [] }
+    },
+    showYearNav: {
+      type: Boolean,
+      default: true
+    },
+    notBefore: {
+      type: String,
+      default: ''
+    },
+    notAfter: {
+      type: String,
+      default: ''
+    }
   },
   data () {
     const translation = this.$parent.translation
@@ -88,15 +104,17 @@ 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),
             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 +139,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 +158,15 @@ export default {
 
       classes.push(cell.classes)
 
+      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+' 00:00:00')).getTime())
+      ) {
+        classes.push('disabled');
+      }
+
       if (cellTime === today) {
         classes.push('today')
       }

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"></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"></calendar-panel>
+        <calendar-panel style="width:50%;box-shadow:1px 0 rgba(0, 0, 0, .1)"
-        <calendar-panel style="width:50%;"  v-model="currentValue[1]" :start-at="currentValue[0]" :show="showPopup"></calendar-panel>
+                        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>
@@ -57,7 +78,23 @@ export default {
       type: String,
       default: 'zh'
     },
-    value: null
+    value: null,
+    disabledDays: {
+      type: Array,
+      default: function () { return [] }
+    },
+    showYearNav: {
+      type: Boolean,
+      default: true
+    },
+    notBefore: {
+      type: String,
+      default: ''
+    },
+    notAfter: {
+      type: String,
+      default: ''
+    }
   },
   data () {
     return {

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.3",
   "scripts": {
     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"