添加shortcuts 自定义

.gitignore

@@ -2,3 +2,4 @@
 node_modules/
 npm-debug.log
 yarn-error.log
+package-lock.json

README.md

@@ -25,6 +25,13 @@ export default {
     return {
       time1: '',
       time2: '',
+      shortcuts: [
+        {
+          text: 'Today',
+          start: new Date(),
+          end: new Date()
+        }
+      ]
     }
   }
 }
@@ -33,7 +40,7 @@ export default {
 <template>
   <div>
     <date-picker v-model="time1"></date-picker>
-    <date-picker v-model="time2" range></date-picker>
+    <date-picker v-model="time2" range :shortcuts="shortcuts"></date-picker>
   </div>
 </template>
 ```
@@ -50,5 +57,18 @@ export default {
 | 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  |
+| shortcuts       | Boolean/Array | true        | the shortcuts for the range picker                |
+
+## shortcuts
+* true -      show the default shortcuts
+* false -     hide the shortcuts
+* Object[] -  custom shortcuts, [{text, start, end}]
+
+| Prop            | Type          |  Description           |
+|-----------------|---------------|------------------------|
+| text            | String        | Text                   |
+| start           | Date          | Start Date             |
+| end             | Date          | End Date               |
+
 
 

datepicker/index.vue

@@ -29,7 +29,7 @@
                         :notAfter="notAfter"></calendar-panel>
       </template>
       <template v-else>
-        <div class="datepicker-top">
+        <div class="datepicker-top" v-if="ranges.length">
           <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)"
@@ -79,6 +79,10 @@ export default {
       default: 'zh'
     },
     value: null,
+    shortcuts: {
+      type: [Boolean, Array],
+      default: true
+    },
     disabledDays: {
       type: Array,
       default: function () { return [] }
@@ -146,9 +150,6 @@ export default {
     }
   },
   methods: {
-    selectDate (date) {
-
-    },
     closePopup () {
       this.showPopup = false
     },
@@ -213,26 +214,32 @@ export default {
       this.$emit('input', [range.start, range.end])
     },
     initRanges () {
-      this.ranges = [{
+      if (Array.isArray(this.shortcuts)) {
-        text: '未来7天',
+        this.ranges = this.shortcuts
-        start: new Date(),
+      } else if (this.shortcuts) {
-        end: new Date(Date.now() + 3600 * 1000 * 24 * 7)
+        this.ranges = [{
-      }, {
+          text: '未来7天',
-        text: '未来30天',
+          start: new Date(),
-        start: new Date(),
+          end: new Date(Date.now() + 3600 * 1000 * 24 * 7)
-        end: new Date(Date.now() + 3600 * 1000 * 24 * 30)
+        }, {
-      }, {
+          text: '未来30天',
-        text: '最近7天',
+          start: new Date(),
-        start: new Date(Date.now() - 3600 * 1000 * 24 * 7),
+          end: new Date(Date.now() + 3600 * 1000 * 24 * 30)
-        end: new Date()
+        }, {
-      }, {
+          text: '最近7天',
-        text: '最近30天',
+          start: new Date(Date.now() - 3600 * 1000 * 24 * 7),
-        start: new Date(Date.now() - 3600 * 1000 * 24 * 30),
+          end: new Date()
-        end: new Date()
+        }, {
-      }]
+          text: '最近30天',
-      this.ranges.forEach((v, i) => {
+          start: new Date(Date.now() - 3600 * 1000 * 24 * 30),
-        v.text = this.translation.pickers[i]
+          end: new Date()
-      })
+        }]
+        this.ranges.forEach((v, i) => {
+          v.text = this.translation.pickers[i]
+        })       
+      } else {
+        this.ranges = []
+      }
     },
     displayPopup () {
       const dw = document.documentElement.clientWidth