From dd9e90d840d03da44b499344623679b1e769081c Mon Sep 17 00:00:00 2001
From: mxie <15623530290@163.com>
Date: Wed, 17 Jan 2018 13:14:33 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8DtimePicker=20=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 datepicker/calendar-panel.vue | 29 +++++++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/datepicker/calendar-panel.vue b/datepicker/calendar-panel.vue
index cb32b68..ec2279c 100644
--- a/datepicker/calendar-panel.vue
+++ b/datepicker/calendar-panel.vue
@@ -375,6 +375,21 @@ export default {
       now.setMonth(now.getMonth() + flag, 1)
       this.now = now
     },
+    scrollIntoView(container, selected) {
+      if (!selected) {
+        container.scrollTop = 0
+        return
+      }
+      const top = selected.offsetTop
+      const bottom = selected.offsetTop + selected.offsetHeight
+      const viewRectTop = container.scrollTop
+      const viewRectBottom = viewRectTop + container.clientHeight
+      if (top < viewRectTop) {
+        container.scrollTop = top
+      } else if (bottom > viewRectBottom) {
+        container.scrollTop = bottom - container.clientHeight
+      }
+    },
     selectDate(cell) {
       const classes = this.getDateClasses(cell)
       if (classes.indexOf('disabled') !== -1) {
@@ -402,9 +417,9 @@ export default {
         this.currentPanel = 'time'
         this.$nextTick(() => {
           Array.prototype.forEach.call(
-            this.$el.querySelectorAll('.cur-time'),
-            function(el) {
-              el.scrollIntoView()
+            this.$el.querySelectorAll('.mx-time-list-wrapper'),
+            (el) => {
+              this.scrollIntoView(el, el.querySelector('.cur-time'))
             }
           )
         })
@@ -490,6 +505,11 @@ export default {
   float: right;
 }
 
+.mx-calendar-content {
+  height: 224px;
+  overflow: hidden;
+}
+
 .mx-calendar-table {
   width: 100%;
   font-size: 12px;
@@ -543,7 +563,7 @@ export default {
 .mx-calendar-month,
 .mx-calendar-time {
   width: 100%;
-  height: 224px;
+  height: 100%;
   padding: 7px 0;
   text-align: center;
 }
@@ -563,6 +583,7 @@ export default {
 }
 
 .mx-time-list-wrapper {
+  position: relative;
   display: inline-block;
   width: 100%;
   height: 100%;