添加popup position 检测

src/App.vue

@@ -20,7 +20,7 @@ export default {
   data () {
     return {
       value1: '2017-5-9',
-      value2:'',
+      value2: ''
     }
   }
 }
@@ -29,7 +29,7 @@ export default {
 <style>
 .demo {
   float:left;
-  margin:60px;
+  margin:250px;
 }
 .label{
   margin-right: 1em;

src/datepicker/calendar-panel.vue

@@ -29,14 +29,12 @@
 </template>
 
 <script>
-import Languages from './languages.js'
-
 export default {
   props: {
     startAt: null,
     endAt: null,
     value: null,
-    show: Boolean,
+    show: Boolean
   },
   data () {
     const translation = this.$parent.translation
@@ -44,7 +42,7 @@ export default {
       days: translation.days,
       months: translation.months,
       dates: [],
-      now: new Date(),
+      now: new Date()
     }
   },
   created () {
@@ -58,9 +56,9 @@ export default {
     },
     value: {
       handler: 'updateNow',
-      immediate: true,
+      immediate: true
     },
-    now: 'updateCalendar',
+    now: 'updateCalendar'
   },
   methods: {
     updateNow () {
@@ -78,7 +76,7 @@ export default {
             title: date.toLocaleDateString(),
             date,
             day,
-            classes,
+            classes
           }
         })
       }
@@ -154,8 +152,8 @@ export default {
         return
       }
       this.$emit('input', cell.date)
-    },
-  },
+    }
+  }
 }
 
 </script>
@@ -242,4 +240,3 @@ export default {
 }
 
 </style>
-

src/datepicker/index.vue

@@ -16,6 +16,8 @@
       @click="clickIcon" ></i>
     <div class="datepicker-popup"
          :class="{'range':range}"
+         :style="position"
+         ref="calendar"
          v-show="showPopup">
       <template v-if="!range">
         <calendar-panel v-model="currentValue" :show="showPopup"></calendar-panel>
@@ -40,29 +42,30 @@ export default {
   props: {
     format: {
       type: String,
-      default: 'yyyy-MM-dd',
+      default: 'yyyy-MM-dd'
     },
     range: {
       type: Boolean,
-      default: false,
+      default: false
     },
     width: {
       type: [String, Number],
-      default: 210,
+      default: 210
     },
     placeholder: String,
     lang: {
       type: String,
       default: 'zh'
     },
-    value: null,
+    value: null
   },
   data () {
     return {
       showPopup: false,
       showCloseIcon: false,
       currentValue: this.value,
-      ranges: [],  // 快捷选项 
+      position: null,
+      ranges: []  // 快捷选项
     }
   },
   watch: {
@@ -74,13 +77,19 @@ export default {
           this.currentValue = this.isValidRange(val) ? val : [undefined, undefined]
         }
       },
-      immediate: true,
+      immediate: true
     },
     currentValue (val) {
       if ((!this.range && val) || (this.range && val[0] && val[1])) {
         this.$emit('input', val)
       }
     },
+    showPopup (val) {
+      if (val) {
+        this.$nextTick(this.displayPopup)
+        // this.displayPopup()
+      }
+    }
   },
   computed: {
     translation () {
@@ -97,10 +106,7 @@ export default {
         return this.stringify(this.currentValue[0]) + ' ~ ' + this.stringify(this.currentValue[1])
       }
       return ''
-    },
-  },
-  created() {
-    this.initRanges()
+    }
   },
   methods: {
     closePopup () {
@@ -138,7 +144,7 @@ export default {
         'm+': date.getMinutes(), // 分
         's+': date.getSeconds(), // 秒
         'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
-        'S': date.getMilliseconds(), // 毫秒
+        'S': date.getMilliseconds() // 毫秒
       }
       let str = fmt.replace(/[Yy]+/g, function (str) {
         return ('' + date.getFullYear()).slice(4 - str.length)
@@ -168,30 +174,51 @@ export default {
     },
     initRanges () {
       this.ranges = [{
-        text: '今天',
+        text: '未来7天',
         start: new Date(),
-        end: new Date(),
+        end: new Date(Date.now() + 3600 * 1000 * 24 * 7)
       }, {
-        text: '未来一周',
-        start: new Date(),
-        end: new Date(Date.now() + 3600 * 1000 * 24 * 7),
-      }, {
-        text: '未来一个月',
+        text: '未来30天',
         start: new Date(),
         end: new Date(Date.now() + 3600 * 1000 * 24 * 30)
       }, {
-        text: '最近一周',
+        text: '最近7天',
         start: new Date(Date.now() - 3600 * 1000 * 24 * 7),
-        end: new Date(),
+        end: new Date()
       }, {
-        text: '最近一个月',
+        text: '最近30天',
         start: new Date(Date.now() - 3600 * 1000 * 24 * 30),
-        end: new Date(),
+        end: new Date()
       }]
       this.ranges.forEach((v, i) => {
         v.text = this.translation.pickers[i]
       })
     },
+    displayPopup () {
+      console.log()
+      const dw = document.documentElement.clientWidth
+      const dh = document.documentElement.clientHeight
+      const InputRect = this.$el.getBoundingClientRect()
+      const PopupRect = this.$refs.calendar.getBoundingClientRect()
+      this.position = {}
+      if (dw - InputRect.left < PopupRect.width && InputRect.right < PopupRect.width) {
+        this.position.left = 1 - InputRect.left + 'px'
+      } else if (InputRect.left + InputRect.width / 2 <= dw / 2) {
+        this.position.left = 0
+      } else {
+        this.position.right = 0
+      }
+      if (InputRect.top <= PopupRect.height + 1 && dh - InputRect.bottom <= PopupRect.height + 1) {
+        this.position.top = dh - InputRect.top - PopupRect.height - 1 + 'px'
+      } else if (InputRect.top + InputRect.height / 2 <= dh / 2) {
+        this.position.top = '100%'
+      } else {
+        this.position.bottom = '100%'
+      }
+    }
+  },
+  created () {
+    this.initRanges()
   },
   directives: {
     clickoutside: {
@@ -205,7 +232,7 @@ export default {
       },
       unbind (el) {
         document.removeEventListener('click', el['@clickoutside'], true)
-      },
+      }
     }
   }
 }
@@ -228,6 +255,7 @@ export default {
   position: absolute;
   width: 248px;
   margin-top: 1px;
+  margin-bottom: 1px;
   border: 1px solid #d9d9d9;
   background-color: #fff;
   box-shadow: 0 6px 12px rgba(0, 0, 0, .175);

src/datepicker/languages.js

@@ -2,7 +2,7 @@ export default {
   'zh': {
     'days': ['日', '一', '二', '三', '四', '五', '六'],
     'months': ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
-    'pickers': ['今天', '未来一周', '未来一个月', '最近一周', '最近一个月'],
+    'pickers': ['未来7天', '未来30天', '最近7天', '最近30天'],
     'placeholder': {
       'date': '请选择日期',
       'dateRange': '请选择日期范围'
@@ -11,10 +11,10 @@ export default {
   'en': {
     'days': ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
     'months': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-    'pickers': ['today', 'next week', 'next month', 'last week', 'last month'],
+    'pickers': ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'],
     'placeholder': {
       'date': 'Select Date',
       'dateRange': 'Select Date Range'
     }
-  },
+  }
 }

src/main.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import App from './App.vue'
 
-new Vue({
+new Vue({  // eslint-disable-line
   el: '#app',
   render: h => h(App)
 })