diff --git a/examples/docs/date-picker.md b/examples/docs/date-picker.md
index 06097e21a..04473a696 100644
--- a/examples/docs/date-picker.md
+++ b/examples/docs/date-picker.md
@@ -50,7 +50,14 @@
               picker.$emit('pick', [start, end]);
             }
           }]
-        }
+        },
+        value1: '',
+        value2: '',
+        value3: '',
+        value4: '',
+        value5: '',
+        value6: '',
+        value7: ''
       };
     }
   };
@@ -63,12 +70,14 @@
 以『日』为基本单位
 
 <el-date-picker
+  v-model="value1"
   type="date"
   placeholder="选择日期">
 </el-date-picker>
 
 ```html
 <el-date-picker
+  v-model="value"
   type="date"
   placeholder="选择日期">
 </el-date-picker>
@@ -79,6 +88,7 @@
 以『周』为基本单位
 
 <el-date-picker
+  v-model="value2"
   type="week"
   format="yyyy 第 WW 周"
   placeholder="选择周">
@@ -86,6 +96,7 @@
 
 ```html
 <el-date-picker
+  v-model="value"
   type="week"
   format="yyyy 第 WW 周"
   placeholder="选择周">
@@ -97,12 +108,14 @@
 以『月』为基本单位
 
 <el-date-picker
+  v-model="value3"
   type="month"
   placeholder="选择月">
 </el-date-picker>
 
 ```html
 <el-date-picker
+  v-model="value"
   type="month"
   placeholder="选择月">
 </el-date-picker>
@@ -113,12 +126,14 @@
 以『年』为基本单位
 
 <el-date-picker
+  v-model="value4"
   type="year"
   placeholder="选择日期">
 </el-date-picker>
 
 ```html
 <el-date-picker
+  v-model="value"
   type="year"
   placeholder="选择日期">
 </el-date-picker>
@@ -129,6 +144,7 @@
 左侧区域可配置快捷选项，例如『今天』、『昨天』等
 
 <el-date-picker
+  v-model="value5"
   type="date"
   placeholder="选择日期"
   :picker-options="pickerOptions1">
@@ -136,6 +152,7 @@
 
 ```html
 <el-date-picker
+  v-model="value"
   type="date"
   placeholder="选择日期"
   :picker-options="pickerOptions1">
@@ -166,7 +183,8 @@
               picker.$emit('pick', date);
             }
           }]
-        }
+        },
+        value: ''
       };
     }
   };
@@ -180,6 +198,7 @@
 在一个选择器中选择
 
 <el-date-picker
+  v-model="value6"
   type="daterange"
   placeholder="选择日期范围"
   style="width: 220px">
@@ -187,6 +206,7 @@
 
 ```html
 <el-date-picker
+  v-model="value"
   type="daterange"
   placeholder="选择日期范围"
   style="width: 220px">
@@ -198,6 +218,7 @@
 左侧区域可配置快捷选项，例如『最近一周』、『最近一个月』等
 
 <el-date-picker
+  v-model="value7"
   type="daterange"
   placeholder="选择日期范围"
   :picker-options="pickerOptions2"
@@ -206,6 +227,7 @@
 
 ```html
 <el-date-picker
+  v-model="value"
   type="daterange"
   placeholder="选择日期范围"
   :picker-options="pickerOptions2"
@@ -242,7 +264,8 @@
               picker.$emit('pick', [start, end]);
             }
           }]
-        }
+        },
+        value: ''
       };
     }
   };
diff --git a/examples/docs/datetime-picker.md b/examples/docs/datetime-picker.md
index 6e03bb2b4..603306b6f 100644
--- a/examples/docs/datetime-picker.md
+++ b/examples/docs/datetime-picker.md
@@ -50,7 +50,23 @@
               picker.$emit('pick', [start, end]);
             }
           }]
-        }
+        },
+        value1: '',
+        value2: '',
+        value3: new Date(),
+        value4: '',
+        value5: '',
+        value6: '',
+        value7: '',
+        value8: '',
+        value9: '',
+        value10: '',
+        value11: '',
+        value12: '',
+        value13: '',
+        value14: '',
+        value15: '',
+        value16: ''
       };
     }
   };
@@ -64,20 +80,24 @@
 
 <div class="demo-box">
   <el-date-picker
+    v-model="value1"
     type="date"
     placeholder="选择日期">
   </el-date-picker>
   <el-time-picker
+    v-model="value1"
     placeholder="选择时间">
   </el-date-picker>
 </div>
 
 ```html
 <el-date-picker
+  v-model="value"
   type="date"
   placeholder="选择日期">
 </el-date-picker>
 <el-time-picker
+  v-model="value"
   placeholder="选择时间">
 </el-time-picker>
 ```
@@ -88,6 +108,7 @@
 
 <div class="demo-box">
   <el-date-picker
+    v-model="value2"
     type="datetime"
     placeholder="选择日期时间">
   </el-date-picker>
@@ -95,6 +116,7 @@
 
 ```html
 <el-date-picker
+  v-model="value"
   type="datetime"
   placeholder="选择日期时间">
 </el-date-picker>
@@ -106,22 +128,26 @@
 
 <div class="demo-box">
   <el-date-picker
+   v-model="value3"
     type="date"
     :picker-options="pickerOptions1"
     placeholder="选择日期">
   </el-date-picker>
   <el-time-picker
+   v-model="value3"
     placeholder="选择时间">
   </el-time-picker>
 </div>
 
 ```html
 <el-date-picker
+  v-model="value"
   type="date"
   placeholder="选择日期"
  :picker-options="pickerOptions1">
 </el-date-picker>
 <el-time-picker
+  v-model="value"
   placeholder="选择时间">
 </el-time-picker>
 
@@ -150,7 +176,8 @@
               picker.$emit('pick', date);
             }
           }]
-        }
+        },
+        value: new Date()
       };
     }
   };
@@ -163,6 +190,7 @@
 
 <div class="demo-box">
   <el-date-picker
+    v-model="value4"
     type="datetime"
     placeholder="选择日期时间"
     :picker-options="pickerOptions1">
@@ -171,6 +199,7 @@
 
 ```html
 <el-date-picker
+  v-model="value"
   type="datetime"
   placeholder="选择日期时间"
   :picker-options="pickerOptions1"
@@ -202,7 +231,8 @@
               picker.$emit('pick', date);
             }
           }]
-        }
+        },
+        value: ''
       };
     }
   };
@@ -217,10 +247,12 @@
 
 <div class="demo-box">
   <el-date-picker
+    v-model="value5"
     type="datetime"
     placeholder="选择开始时间">
   </el-date-picker>
   <el-date-picker
+    v-model="value6"
     type="datetime"
     placeholder="选择结束时间">
   </el-date-picker>
@@ -228,10 +260,12 @@
 
 ```html
 <el-date-picker
+  v-model="startTime"
   type="datetime"
   placeholder="选择开始时间">
 </el-date-picker>
 <el-date-picker
+  v-model="endTime"
   type="datetime"
   placeholder="选择结束时间">
 </el-date-picker>
@@ -243,6 +277,7 @@
 
 <div class="demo-box">
   <el-date-picker
+    v-model="value7"
     type="datetimerange"
     placeholder="选择时间范围"
     style="width:340px">
@@ -251,6 +286,7 @@
 
 ```html
 <el-date-picker
+  v-model="value"
   type="datetimerange"
   placeholder="选择时间范围"
   style="width:340px">
@@ -263,6 +299,7 @@
 
 <div class="demo-box">
   <el-date-picker
+    v-model="value8"
     type="datetimerange"
     :picker-options="pickerOptions2"
     placeholder="选择时间范围"
@@ -272,6 +309,7 @@
 
 ```html
 <el-date-picker
+  v-model="value"
   type="datetimerange"
   :picker-options="pickerOptions2"
   placeholder="选择时间范围"
@@ -282,6 +320,7 @@
   module.exports = {
     data() {
       return {
+        value: '',
         pickerOptions2: {
           shortcuts: [{
             text: '最近一周',
@@ -321,11 +360,13 @@
 
 <div class="demo-box">
   <el-date-picker
+    v-model="value9"
     type="daterange"
     placeholder="选择日期范围"
     style="width:220px">
   </el-date-picker>
   <el-time-picker
+    v-model="value10"
     is-range
     placeholder="选择时间范围">
   </el-time-picker>
@@ -333,11 +374,13 @@
 
 ```html
 <el-date-picker
+  v-model="date"
   type="daterange"
   placeholder="选择日期范围"
   style="width:220px">
 </el-date-picker>
 <el-time-picker
+  v-model="time"
   is-range
   placeholder="选择时间范围">
 </el-time-picker>
@@ -350,10 +393,12 @@
 
 <div class="demo-box">
   <el-date-picker
+    v-model="value11"
     type="week"
     placeholder="选择开始周">
   </el-date-picker>
   <el-date-picker
+    v-model="value12"
     type="week"
     placeholder="选择结束周">
   </el-date-picker>
@@ -361,10 +406,12 @@
 
 ```html
 <el-date-picker
+  v-model="startWeek"
   type="week"
   placeholder="选择开始周">
 </el-date-picker>
 <el-date-picker
+  v-model="endWeek"
   type="week"
   placeholder="选择结束周">
 </el-date-picker>
@@ -374,10 +421,12 @@
 
 <div class="demo-box">
   <el-date-picker
+    v-model="value13"
     type="month"
     placeholder="选择开始月">
   </el-date-picker>
   <el-date-picker
+    v-model="value14"
     type="month"
     placeholder="选择结束月">
   </el-date-picker>
@@ -385,10 +434,12 @@
 
 ```html
 <el-date-picker
+  v-model="startMonth"
   type="month"
   placeholder="选择开始月">
 </el-date-picker>
 <el-date-picker
+  v-model="endMonth"
   type="month"
   placeholder="选择结束月">
 </el-date-picker>
@@ -398,10 +449,12 @@
 
 <div class="demo-box">
   <el-date-picker
+    v-model="value15"
     type="year"
     placeholder="选择开始年">
   </el-date-picker>
   <el-date-picker
+    v-model="value16"
     type="year"
     placeholder="选择结束年">
   </el-date-picker>
@@ -409,10 +462,12 @@
 
 ```html
 <el-date-picker
+  v-model="startYear"
   type="year"
   placeholder="选择开始年">
 </el-date-picker>
 <el-date-picker
+  v-model="endYear"
   type="year"
   placeholder="选择结束年">
 </el-date-picker>
diff --git a/examples/docs/time-picker.md b/examples/docs/time-picker.md
index 6b7d58033..654e618bc 100644
--- a/examples/docs/time-picker.md
+++ b/examples/docs/time-picker.md
@@ -8,9 +8,9 @@
 
 ## 固定时间点
 提供几个固定的时间点供用户选择。
-
 <div class="demo-box">
   <el-time-select
+    v-model="value1"
     :picker-options="{
       start: '08:30',
       step: '00:15',
@@ -22,7 +22,7 @@
 
 ```html
 <el-time-select
-  :value.sync="value"
+  v-model="value"
   :picker-options="{
     start: '08:30',
     step: '00:15',
@@ -37,13 +37,14 @@
 
 <div class="demo-box">
   <el-time-picker
+    v-model="value2"
     placeholder="任意时间点">
   </el-time-picker>
 </div>
 
 ```html
 <el-time-picker
-  :value.sync="value"
+  v-model="value"
   placeholder="任意时间点">
 </el-time-picker>
 ```
@@ -51,13 +52,14 @@
 ### 通用 - 手动输入规则
 <div class="demo-box">
   <el-time-picker
+    v-model="value3"
     placeholder="任意时间点">
   </el-time-picker>
 </div>
 
 ```html
 <el-time-picker
-  :value.sync="value"
+  v-model="value"
   placeholder="任意时间点">
 </el-time-picker>
 ```
@@ -66,6 +68,7 @@
 
 <div class="demo-box">
   <el-time-picker
+    v-model="value4"
     :picker-options="{
       selectableRange: '18:30:00 - 20:30:00'
     }"
@@ -75,7 +78,7 @@
 
 ```html
 <el-time-picker
-  :value.sync="value"
+  v-model="value"
   :picker-options="{
     selectableRange: '18:30:00 - 20:30:00'
   }"
@@ -92,7 +95,7 @@
 <div class="demo-box">
   <el-time-select
     placeholder="起始时间"
-    :value.sync="startTime"
+    v-model="startTime"
     :picker-options="{
       start: '08:30',
       step: '00:15',
@@ -101,7 +104,7 @@
   </el-time-select>
   <el-time-select
     placeholder="结束时间"
-    :value.sync="endTime"
+    v-model="endTime"
     :picker-options="{
       start: '08:30',
       step: '00:15',
@@ -114,7 +117,7 @@
 ```html
 <el-time-select
   placeholder="起始时间"
-  :value.sync="startTime"
+  v-model="startTime"
   :picker-options="{
     start: '08:30',
     step: '00:15',
@@ -123,7 +126,7 @@
 </el-time-select>
 <el-time-select
   placeholder="结束时间"
-  :value.sync="endTime"
+  v-model="endTime"
   :picker-options="{
     start: '08:30',
     step: '00:15',
@@ -139,7 +142,7 @@
 <div class="demo-box">
   <el-time-select
     placeholder="起始时间"
-    :value.sync="startTime2"
+    v-model="startTime2"
     :picker-options="{
       start: '08:30',
       step: '00:15',
@@ -148,7 +151,7 @@
   </el-time-select>
   <el-time-select
     placeholder="结束时间"
-    :value.sync="endTime2"
+    v-model="endTime2"
     :picker-options="{
       start: '08:30',
       step: '00:15',
@@ -161,7 +164,7 @@
 ```html
 <el-time-select
   placeholder="起始时间"
-  :value.sync="startTime2"
+  v-model="startTime2"
   :picker-options="{
     start: '08:30',
     step: '00:15',
@@ -170,7 +173,7 @@
 </el-time-select>
 <el-time-select
   placeholder="结束时间"
-  :value.sync="endTime2"
+  v-model="endTime2"
   :picker-options="{
     start: '08:30',
     step: '00:15',
@@ -186,6 +189,7 @@
 <div class="demo-box">
   <el-time-picker
     is-range
+    v-model="value5"
     placeholder="选择时间范围">
   </el-time-picker>
 </div>
@@ -193,6 +197,7 @@
 ```html
 <el-time-picker
   is-range
+  v-model="value"
   placeholder="选择时间范围">
 </el-time-picker>
 ```
@@ -201,6 +206,11 @@
   export default {
     data() {
       return {
+        value1: '',
+        value2: '',
+        value3: '',
+        value4: '',
+        value5: '',
         startTime: '',
         endTime: '',
         startTime2: '',
diff --git a/package.json b/package.json
index 034f16084..412dc35d2 100644
--- a/package.json
+++ b/package.json
@@ -44,8 +44,9 @@
     "purecss": "^0.6.0",
     "q": "^1.4.1",
     "uppercamelcase": "^1.1.0",
+    "vue": "^2.0.0-beta.7",
+    "vue-loader": "^9.3.2",
     "vue": "^2.0.0-beta.8",
-    "vue-loader": "^9.2.3",
     "vue-markdown-loader": "^0.4.0",
     "vue-popup": "^0.2.1",
     "vue-router": "^2.0.0-beta.2"
diff --git a/packages/date-picker/package.json b/packages/date-picker/package.json
index d863212b9..8ce932f2b 100644
--- a/packages/date-picker/package.json
+++ b/packages/date-picker/package.json
@@ -12,10 +12,9 @@
   "author": "long.zhang@ele.me",
   "license": "MIT",
   "dependencies": {
-    "wind-dom": "0.0.3",
-    "vue-clickoutside": "*"
+    "wind-dom": "0.0.3"
   },
   "devDependencies": {
-    "vue": "^1.0.0"
+    "vue": "^2.0.0-beta.7"
   }
 }
diff --git a/packages/date-picker/src/basic/date-table.vue b/packages/date-picker/src/basic/date-table.vue
index de4a0cf13..92a13a24e 100644
--- a/packages/date-picker/src/basic/date-table.vue
+++ b/packages/date-picker/src/basic/date-table.vue
@@ -392,24 +392,30 @@
 
         if (clickNormalCell && this.selectionMode === 'range') {
           if (this.minDate && this.maxDate) {
-            this.minDate = new Date(newDate.getTime());
-            this.maxDate = null;
+            const minDate = new Date(newDate.getTime());
+            const maxDate = null;
+
+            this.$emit('pick', { minDate, maxDate }, false);
             this.rangeState.selecting = true;
             this.markRange(this.minDate);
           } else if (this.minDate && !this.maxDate) {
             if (newDate >= this.minDate) {
-              this.maxDate = new Date(newDate.getTime());
+              const maxDate = new Date(newDate.getTime());
               this.rangeState.selecting = false;
 
               this.$emit('pick', {
                 minDate: this.minDate,
-                maxDate: this.maxDate
+                maxDate
               });
             } else {
-              this.minDate = new Date(newDate.getTime());
+              const minDate = new Date(newDate.getTime());
+
+              this.$emit('pick', { minDate, maxDate: this.maxDate }, false);
             }
           } else if (!this.minDate) {
-            this.minDate = new Date(newDate.getTime());
+            const minDate = new Date(newDate.getTime());
+
+            this.$emit('pick', { minDate, maxDate: this.maxDate }, false);
             this.rangeState.selecting = true;
             this.markRange(this.minDate);
           }
@@ -420,11 +426,11 @@
         } else if (selectionMode === 'week') {
           var weekNumber = getWeekNumber(newDate);
 
-          this.value = newDate.getFullYear() + 'w' + weekNumber;
+          const value = newDate.getFullYear() + 'w' + weekNumber;
           this.$emit('pick', {
             year: newDate.getFullYear(),
             week: weekNumber,
-            value: this.value,
+            value: value,
             date: newDate
           });
         }
diff --git a/packages/date-picker/src/basic/month-table.vue b/packages/date-picker/src/basic/month-table.vue
index 7e0fef950..befa42cca 100644
--- a/packages/date-picker/src/basic/month-table.vue
+++ b/packages/date-picker/src/basic/month-table.vue
@@ -65,7 +65,7 @@
         if (target.tagName !== 'A') return;
         const column = target.parentNode.cellIndex;
         const row = target.parentNode.parentNode.rowIndex;
-        const month = this.month = row * 4 + column;
+        const month = row * 4 + column;
 
         this.$emit('pick', month);
       }
diff --git a/packages/date-picker/src/basic/time-spinner.vue b/packages/date-picker/src/basic/time-spinner.vue
index 51dcc3f5c..1a98fd07b 100644
--- a/packages/date-picker/src/basic/time-spinner.vue
+++ b/packages/date-picker/src/basic/time-spinner.vue
@@ -1,43 +1,46 @@
 <template>
-  <div
-    @mouseenter="emitSelectRange('hours')"
-    class="el-time-spinner__wrapper"
-    v-el:hour>
-    <ul class="el-time-spinner__list">
-      <li
-        @click="handleClick('hours', { value: hour, disabled: disabled }, true)"
-        v-for="(hour, disabled) in hoursList"
-        track-by="$index"
-        class="el-time-spinner__item"
-        :class="{ 'active': hour === hours, 'disabled': disabled }"
-        v-text="hour"></li>
-    </ul>
-  </div>
-  <div
-    @mouseenter="emitSelectRange('minutes')"
-    class="el-time-spinner__wrapper"
-    v-el:minute>
-    <ul class="el-time-spinner__list">
-      <li
-        @click="handleClick('minutes', minute, true)"
-        v-for="minute in 60"
-        class="el-time-spinner__item"
-        :class="{ 'active': minute === minutes }"
-        v-text="minute"></li>
-    </ul>
-  </div>
-  <div
-    @mouseenter="emitSelectRange('seconds')"
-    class="el-time-spinner__wrapper"
-    v-el:second>
-    <ul class="el-time-spinner__list">
-      <li
-        @click="handleClick('seconds', second, true)"
-        v-for="second in 60"
-        class="el-time-spinner__item"
-        :class="{ 'active': second === seconds }"
-        v-text="second"></li>
-    </ul>
+  <div class="el-time-spinner">
+    {{hours}}
+    <div
+      @mouseenter="emitSelectRange('hours')"
+      class="el-time-spinner__wrapper"
+      ref="hour">
+      <ul class="el-time-spinner__list">
+        <li
+          @click="handleClick('hours', { value: hour, disabled: disabled }, true)"
+          v-for="(disabled, hour) in hoursList"
+          track-by="hour"
+          class="el-time-spinner__item"
+          :class="{ 'active': hour === hours, 'disabled': disabled }"
+          v-text="hour"></li>
+      </ul>
+    </div>
+    <div
+      @mouseenter="emitSelectRange('minutes')"
+      class="el-time-spinner__wrapper"
+      ref="minute">
+      <ul class="el-time-spinner__list">
+        <li
+          @click="handleClick('minutes', key, true)"
+          v-for="(minute, key) in 60"
+          class="el-time-spinner__item"
+          :class="{ 'active': key === minutes }"
+          v-text="key"></li>
+      </ul>
+    </div>
+    <div
+      @mouseenter="emitSelectRange('seconds')"
+      class="el-time-spinner__wrapper"
+      ref="second">
+      <ul class="el-time-spinner__list">
+        <li
+          @click="handleClick('seconds', key, true)"
+          v-for="(second, key) in 60"
+          class="el-time-spinner__item"
+          :class="{ 'active': key === seconds }"
+          v-text="key"></li>
+      </ul>
+    </div>
   </div>
 </template>
 
@@ -64,33 +67,32 @@
       showSeconds: {
         type: Boolean,
         default: true
-      },
-
-      selectableRange: {}
+      }
     },
 
     watch: {
-      hours(newVal, oldVal) {
+      hoursPrivate(newVal, oldVal) {
         if (!(newVal >= 0 && newVal <= 23)) {
-          this.hours = oldVal;
+          this.hoursPrivate = oldVal;
         }
-        this.$els.hour.scrollTop = Math.max(0, (this.hours - 2.5) * 32 + 80);
+        this.$refs.hour.scrollTop = Math.max(0, (this.hoursPrivate - 2.5) * 32 + 80);
+
         this.$emit('change', { hours: newVal });
       },
 
-      minutes(newVal, oldVal) {
+      minutesPrivate(newVal, oldVal) {
         if (!(newVal >= 0 && newVal <= 59)) {
-          this.minutes = oldVal;
+          this.minutesPrivate = oldVal;
         }
-        this.$els.minute.scrollTop = Math.max(0, (this.minutes - 2.5) * 32 + 80);
+        this.$refs.minute.scrollTop = Math.max(0, (this.minutesPrivate - 2.5) * 32 + 80);
         this.$emit('change', { minutes: newVal });
       },
 
-      seconds(newVal, oldVal) {
+      secondsPrivate(newVal, oldVal) {
         if (!(newVal >= 0 && newVal <= 59)) {
-          this.seconds = oldVal;
+          this.secondsPrivate = oldVal;
         }
-        this.$els.second.scrollTop = Math.max(0, (this.seconds - 2.5) * 32 + 80);
+        this.$refs.second.scrollTop = Math.max(0, (this.secondsPrivate - 2.5) * 32 + 80);
         this.$emit('change', { seconds: newVal });
       }
     },
@@ -101,9 +103,18 @@
       }
     },
 
+    data() {
+      return {
+        hoursPrivate: 0,
+        minutesPrivate: 0,
+        secondsPrivate: 0,
+        selectableRange: []
+      };
+    },
+
     methods: {
       focusEditor(type) {
-        const editor = this.$els[type + 'Editor'];
+        const editor = this.$refs[type + 'Editor'];
         if (editor) {
           editor.focus();
         }
@@ -114,7 +125,7 @@
           return;
         }
 
-        this[type] = value.value >= 0 ? value.value : value;
+        this[type + 'Private'] = value.value >= 0 ? value.value : value;
 
         this.emitSelectRange(type);
       },
@@ -130,9 +141,9 @@
       },
 
       ajustScrollTop() {
-        this.$els.hour.scrollTop = Math.max(0, (this.hours - 2.5) * 32 + 80);
-        this.$els.minute.scrollTop = Math.max(0, (this.minutes - 2.5) * 32 + 80);
-        this.$els.second.scrollTop = Math.max(0, (this.seconds - 2.5) * 32 + 80);
+        this.$refs.hour.scrollTop = Math.max(0, (this.hours - 2.5) * 32 + 80);
+        this.$refs.minute.scrollTop = Math.max(0, (this.minutes - 2.5) * 32 + 80);
+        this.$refs.second.scrollTop = Math.max(0, (this.seconds - 2.5) * 32 + 80);
       }
     }
   };
diff --git a/packages/date-picker/src/basic/year-table.vue b/packages/date-picker/src/basic/year-table.vue
index d454bd653..beca05ee0 100644
--- a/packages/date-picker/src/basic/year-table.vue
+++ b/packages/date-picker/src/basic/year-table.vue
@@ -59,17 +59,17 @@
 
     methods: {
       nextTenYear() {
-        this.year += 10;
+        this.$emit('pick', this.year + 10, false);
       },
 
       prevTenYear() {
-        this.year -= 10;
+        this.$emit('pick', this.year - 10, false);
       },
 
       handleYearTableClick(event) {
         const target = event.target;
         if (target.tagName === 'A') {
-          const year = this.year = parseInt(target.textContent || target.innerText, 10);
+          const year = parseInt(target.textContent || target.innerText, 10);
           this.$emit('pick', year);
         }
       }
diff --git a/packages/date-picker/src/panel/date-range.vue b/packages/date-picker/src/panel/date-range.vue
index 33ba27e40..5c7c2ade9 100644
--- a/packages/date-picker/src/panel/date-range.vue
+++ b/packages/date-picker/src/panel/date-range.vue
@@ -1,161 +1,128 @@
 <template>
-  <div
-    v-show="visible"
-    transition="md-fade-bottom"
-    class="el-picker-panel el-date-range-picker">
-    <div class="el-picker-panel__body-wrapper">
-      <slot name="sidebar" class="el-picker-panel__sidebar"></slot>
-      <div class="el-picker-panel__sidebar" v-if="shortcuts">
-        <button
-          class="el-picker-panel__shortcut"
-          v-for="shortcut in shortcuts"
-          @click="handleShortcutClick(shortcut)">{{shortcut.text}}</button>
-      </div>
-      <div class="el-picker-panel__body">
-        <div class="el-date-range-picker__time-header" v-if="showTime">
-          <span class="el-date-range-picker__editors-wrap">
-            <input
-              placeholder="开始日期"
-              class="el-date-range-picker__editor"
-              v-model="leftVisibleDate"
-              @input="handleDateInput($event, 'min')"
-              @change="handleDateChange($event, 'min')"/>
-            <span class="el-date-range-picker__time-picker-wrap">
+  <transition name="md-fade-bottom">
+    <div
+      v-show="visible"
+      class="el-picker-panel el-date-range-picker">
+      <div class="el-picker-panel__body-wrapper">
+        <slot name="sidebar" class="el-picker-panel__sidebar"></slot>
+        <div class="el-picker-panel__sidebar" v-if="shortcuts">
+          <button
+            class="el-picker-panel__shortcut"
+            v-for="shortcut in shortcuts"
+            @click="handleShortcutClick(shortcut)">{{shortcut.text}}</button>
+        </div>
+        <div class="el-picker-panel__body">
+          <div class="el-date-range-picker__time-header" v-if="showTime">
+            <span class="el-date-range-picker__editors-wrap">
               <input
-                placeholder="开始时间"
+                placeholder="开始日期"
                 class="el-date-range-picker__editor"
-                v-model="leftVisibleTime"
-                @focus="leftTimePickerVisible = true"
-                @change="handleTimeChange($event, 'min')"/>
-              <time-picker
-                v-ref:lefttimepicker
-                :date="minDate"
-                @pick="handleLeftTimePick"
-                v-show="leftTimePickerVisible">
-              </time-picker>
+                v-model="leftVisibleDate"
+                @input="handleDateInput($event, 'min')"
+                @change="handleDateChange($event, 'min')"/>
+              <span class="el-date-range-picker__time-picker-wrap">
+                <input
+                  placeholder="开始时间"
+                  class="el-date-range-picker__editor"
+                  v-model="leftVisibleTime"
+                  @focus="leftTimePickerVisible = true"
+                  @change="handleTimeChange($event, 'min')"/>
+                <time-picker
+                  v-ref:lefttimepicker
+                  :date="minDate"
+                  @pick="handleLeftTimePick"
+                  v-show="leftTimePickerVisible">
+                </time-picker>
+              </span>
             </span>
-          </span>
-          <span class="el-icon-arrow-right"></span>
-          <span class="el-date-range-picker__editors-wrap is-right">
-            <input
-              placeholder="结束日期"
-              class="el-date-range-picker__editor"
-              v-model="rightVisibleDate"
-              :readonly="!minDate"
-              @input="handleDateInput($event, 'max')"
-              @change="handleDateChange($event, 'max')" />
-            <span class="el-date-range-picker__time-picker-wrap">
+            <span class="el-icon-arrow-right"></span>
+            <span class="el-date-range-picker__editors-wrap is-right">
               <input
-                placeholder="结束时间"
+                placeholder="结束日期"
                 class="el-date-range-picker__editor"
-                v-model="rightVisibleTime"
-                @focus="minDate && (rightTimePickerVisible = true)"
+                v-model="rightVisibleDate"
                 :readonly="!minDate"
-                @change="handleTimeChange($event, 'max')" />
-              <time-picker
-                v-ref:righttimepicker
-                :date="maxDate"
-                @pick="handleRightTimePick"
-                v-show="rightTimePickerVisible"></time-picker>
+                @input="handleDateInput($event, 'max')"
+                @change="handleDateChange($event, 'max')" />
+              <span class="el-date-range-picker__time-picker-wrap">
+                <input
+                  placeholder="结束时间"
+                  class="el-date-range-picker__editor"
+                  v-model="rightVisibleTime"
+                  @focus="minDate && (rightTimePickerVisible = true)"
+                  :readonly="!minDate"
+                  @change="handleTimeChange($event, 'max')" />
+                <time-picker
+                  v-ref:righttimepicker
+                  :date="maxDate"
+                  @pick="handleRightTimePick"
+                  v-show="rightTimePickerVisible"></time-picker>
+              </span>
             </span>
-          </span>
-        </div>
-        <div class="el-picker-panel__content el-date-range-picker__content is-left">
-          <div class="el-date-range-picker__header">
-            <button
-              @click="prevYear"
-              class="el-picker-panel__icon-btn el-icon-d-arrow-left"></button>
-            <button
-              @click="prevMonth"
-              class="el-picker-panel__icon-btn el-icon-arrow-left"></button>
-            <div>{{ leftLabel }}</div>
           </div>
-          <date-table
-            selection-mode="range"
-            :date="date"
-            :year="leftYear"
-            :month="leftMonth"
-            :min-date="minDate"
-            :max-date="maxDate"
-            :range-state="rangeState"
-            @changerange="handleChangeRange"
-            @pick="handleRangePick">
-          </date-table>
-        </div>
-        <div class="el-picker-panel__content el-date-range-picker__content is-right">
-          <div class="el-date-range-picker__header">
-            <button
-              @click="nextYear"
-              class="el-picker-panel__icon-btn el-icon-d-arrow-right"></button>
-            <button
-              @click="nextMonth"
-              class="el-picker-panel__icon-btn el-icon-arrow-right"></button>
-            <div>{{ rightLabel }}</div>
+          <div class="el-picker-panel__content el-date-range-picker__content is-left">
+            <div class="el-date-range-picker__header">
+              <button
+                @click="prevYear"
+                class="el-picker-panel__icon-btn el-icon-d-arrow-left"></button>
+              <button
+                @click="prevMonth"
+                class="el-picker-panel__icon-btn el-icon-arrow-left"></button>
+              <div>{{ leftLabel }}</div>
+            </div>
+            <date-table
+              selection-mode="range"
+              :date="date"
+              :year="leftYear"
+              :month="leftMonth"
+              :min-date="minDate"
+              :max-date="maxDate"
+              :range-state="rangeState"
+              @changerange="handleChangeRange"
+              @pick="handleRangePick">
+            </date-table>
+          </div>
+          <div class="el-picker-panel__content el-date-range-picker__content is-right">
+            <div class="el-date-range-picker__header">
+              <button
+                @click="nextYear"
+                class="el-picker-panel__icon-btn el-icon-d-arrow-right"></button>
+              <button
+                @click="nextMonth"
+                class="el-picker-panel__icon-btn el-icon-arrow-right"></button>
+              <div>{{ rightLabel }}</div>
+            </div>
+            <date-table
+              selection-mode="range"
+              :date="rightDate"
+              :year="rightYear"
+              :month="rightMonth"
+              :min-date="minDate"
+              :max-date="maxDate"
+              :range-state="rangeState"
+              @changerange="handleChangeRange"
+              @pick="handleRangePick"></date-table>
           </div>
-          <date-table
-            selection-mode="range"
-            :date="rightDate"
-            :year="rightYear"
-            :month="rightMonth"
-            :min-date="minDate"
-            :max-date="maxDate"
-            :range-state="rangeState"
-            @changerange="handleChangeRange"
-            @pick="handleRangePick"></date-table>
         </div>
       </div>
+      <div class="el-picker-panel__footer" v-if="showTime">
+        <a
+          href="JavaScript:"
+          class="el-picker-panel__link-btn"
+          @click="changeToToday">{{ $t('datepicker.today') }}</a>
+        <button
+          class="el-picker-panel__btn"
+          @click="handleConfirm"
+          :disabled="btnDisabled">确定</button>
+      </div>
     </div>
-    <div class="el-picker-panel__footer" v-if="showTime">
-      <a
-        href="JavaScript:"
-        class="el-picker-panel__link-btn"
-        @click="changeToToday">{{ $t('datepicker.today') }}</a>
-      <button
-        class="el-picker-panel__btn"
-        @click="handleConfirm"
-        :disabled="btnDisabled">确定</button>
-    </div>
-  </div>
+  </transition>
 </template>
 
 <script type="text/ecmascript-6">
   import { nextMonth, prevMonth, $t, formatDate, parseDate } from '../util';
 
   export default {
-    props: {
-      date: {
-        default() {
-          return new Date();
-        }
-      },
-
-      minDate: {},
-
-      maxDate: {},
-
-      rangeState: {
-        default() {
-          return {
-            endDate: null,
-            selecting: false,
-            row: null,
-            column: null
-          };
-        }
-      },
-
-      showTime: {
-        type: Boolean,
-        default: false
-      },
-
-      shortcuts: {},
-
-      value: {},
-
-      visible: Boolean
-    },
-
     computed: {
       btnDisabled() {
         return !(this.minDate && this.maxDate && !this.selecting);
@@ -272,6 +239,19 @@
 
     data() {
       return {
+        date: new Date(),
+        minDate: '',
+        maxDate: '',
+        rangeState: {
+          endDate: null,
+          selecting: false,
+          row: null,
+          column: null
+        },
+        showTime: false,
+        shortcuts: '',
+        value: '',
+        visible: '',
         leftTimePickerVisible: false,
         rightTimePickerVisible: false
       };
@@ -286,9 +266,6 @@
         });
       },
 
-      maxDate() {
-      },
-
       leftTimePickerVisible(val) {
         if (val) this.$refs.lefttimepicker.ajustScrollTop();
       },
@@ -377,9 +354,11 @@
         }
       },
 
-      handleRangePick(val) {
+      handleRangePick(val, close = true) {
         this.maxDate = val.maxDate;
         this.minDate = val.minDate;
+
+        if (!close) return;
         if (!this.showTime) {
           this.$emit('pick', [this.minDate, this.maxDate]);
         }
diff --git a/packages/date-picker/src/panel/date.vue b/packages/date-picker/src/panel/date.vue
index 032667605..d2ef4db9f 100644
--- a/packages/date-picker/src/panel/date.vue
+++ b/packages/date-picker/src/panel/date.vue
@@ -1,139 +1,113 @@
 <template>
-  <div
-    v-show="visible"
-    transition="md-fade-bottom"
-    class="el-picker-panel el-date-picker">
-    <div class="el-picker-panel__body-wrapper">
-      <slot name="sidebar" class="el-picker-panel__sidebar"></slot>
-      <div class="el-picker-panel__sidebar" v-if="shortcuts">
-        <button
-          class="el-picker-panel__shortcut"
-          v-for="shortcut in shortcuts"
-          @click="handleShortcutClick(shortcut)">{{ shortcut.text }}</button>
-      </div>
-      <div class="el-picker-panel__body">
-       <div class="el-date-picker__time-header" v-if="showTime">
-          <input
-            placehoder="选择日期"
-            type="text"
-            v-model="visibleDate"
-            class="el-date-picker__editor">
-          <span class="el-date-picker__editor">
-            <input
-              @focus="timePickerVisible = true"
-              v-model="visibleTime"
-              placehoder="选择时间"
-              type="text"
-              class="el-date-picker__editor">
-            <time-picker
-              v-ref:timepicker
-              :date="date"
-              @pick="handleTimePick"
-              v-show="timePickerVisible">
-            </time-picker>
-          </span>
-        </div>
-        <div class="el-date-picker__header" v-show="currentView !== 'time'">
-          <button
-            @click="prevYear"
-            class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left">
-          </button>
-          <button
-            @click="prevMonth"
-            v-show="currentView === 'date'"
-            class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-arrow-left">
-          </button>
-          <span
-            @click="showYearPicker"
-            class="el-date-picker__header-label">{{ yearLabel }}</span>
-          <span
-            @click="showMonthPicker"
-            v-show="currentView === 'date'"
-            class="el-date-picker__header-label"
-            :class="{ active: currentView === 'month' }">{{ month + 1 }}月</span>
-          <button
-            @click="nextYear"
-            class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right">
-          </button>
-          <button
-            @click="nextMonth"
-            v-show="currentView === 'date'"
-            class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-arrow-right">
-          </button>
-        </div>
-
-        <div class="el-picker-panel__content">
-          <date-table
-            v-show="currentView === 'date'"
-            @pick="handleDatePick"
-            :year="year"
-            :month="month"
-            :date="date"
-            :value="value"
-            :week="week"
-            :selection-mode="selectionMode"
-            :disabled-date="disabledDate">
-          </date-table>
-          <year-table
-            v-ref:year-table
-            :year="year"
-            v-show="currentView === 'year'"
-            @pick="handleYearPick">
-          </year-table>
-          <month-table
-            :month="month"
-            v-show="currentView === 'month'"
-            @pick="handleMonthPick">
-          </month-table>
-        </div>
-      </div>
-    </div>
-
+  <transition name="md-fade-bottom">
     <div
-      class="el-picker-panel__footer"
-      v-show="footerVisible && currentView === 'date'">
-      <a
-        href="JavaScript:"
-        class="el-picker-panel__link-btn"
-        @click="changeToToday">{{ $t('datepicker.today') }}</a>
-      <button
-        class="el-picker-panel__btn"
-        @click="confirm">{{ $t('datepicker.confirm') }}</button>
+      v-show="visible"
+      class="el-picker-panel el-date-picker">
+      <div class="el-picker-panel__body-wrapper">
+        <slot name="sidebar" class="el-picker-panel__sidebar"></slot>
+        <div class="el-picker-panel__sidebar" v-if="shortcuts">
+          <button
+            class="el-picker-panel__shortcut"
+            v-for="shortcut in shortcuts"
+            @click="handleShortcutClick(shortcut)">{{ shortcut.text }}</button>
+        </div>
+        <div class="el-picker-panel__body">
+         <div class="el-date-picker__time-header" v-if="showTime">
+            <input
+              placehoder="选择日期"
+              type="text"
+              v-model="visibleDate"
+              class="el-date-picker__editor">
+            <span style="position: relative" v-clickoutside="closeTimePicker">
+              <input
+                @focus="timePickerVisible = true"
+                v-model="visibleTime"
+                placehoder="选择时间"
+                type="text"
+                class="el-date-picker__editor">
+              <time-picker
+                ref="timepicker"
+                :date="date"
+                @pick="handleTimePick"
+                :visible="timePickerVisible">
+              </time-picker>
+            </span>
+          </div>
+          <div class="el-date-picker__header" v-show="currentView !== 'time'">
+            <button
+              @click="prevYear"
+              class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left">
+            </button>
+            <button
+              @click="prevMonth"
+              v-show="currentView === 'date'"
+              class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-arrow-left">
+            </button>
+            <span
+              @click="showYearPicker"
+              class="el-date-picker__header-label">{{ yearLabel }}</span>
+            <span
+              @click="showMonthPicker"
+              v-show="currentView === 'date'"
+              class="el-date-picker__header-label"
+              :class="{ active: currentView === 'month' }">{{ month + 1 }}月</span>
+            <button
+              @click="nextYear"
+              class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right">
+            </button>
+            <button
+              @click="nextMonth"
+              v-show="currentView === 'date'"
+              class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-arrow-right">
+            </button>
+          </div>
+
+          <div class="el-picker-panel__content">
+            <date-table
+              v-show="currentView === 'date'"
+              @pick="handleDatePick"
+              :year="year"
+              :month="month"
+              :date="date"
+              :value="value"
+              :week="week"
+              :selection-mode="selectionMode"
+              :disabled-date="disabledDate">
+            </date-table>
+            <year-table
+              ref="yearTable"
+              :year="year"
+              v-show="currentView === 'year'"
+              @pick="handleYearPick">
+            </year-table>
+            <month-table
+              :month="month"
+              v-show="currentView === 'month'"
+              @pick="handleMonthPick">
+            </month-table>
+          </div>
+        </div>
+      </div>
+
+      <div
+        class="el-picker-panel__footer"
+        v-show="footerVisible && currentView === 'date'">
+        <a
+          href="JavaScript:"
+          class="el-picker-panel__link-btn"
+          @click="changeToToday">{{ $t('datepicker.today') }}</a>
+        <button
+          class="el-picker-panel__btn"
+          @click="confirm">{{ $t('datepicker.confirm') }}</button>
+      </div>
     </div>
-  </div>
+  </transition>
 </template>
 
 <script type="text/ecmascript-6">
   import { $t, formatDate, parseDate } from '../util';
 
   export default {
-    props: {
-      currentView: {
-        default: 'date'
-      },
-
-      date: {
-        default() {
-          return new Date();
-        }
-      },
-
-      disabledDate: {},
-
-      value: {},
-
-      showTime: Boolean,
-
-      selectionMode: {
-        type: String,
-        default: 'day'
-      },
-
-      shortcuts: {},
-
-      visible: Boolean
-    },
-
     watch: {
       value(newVal) {
         if (this.selectionMode === 'day' && newVal instanceof Date) {
@@ -144,7 +118,7 @@
       },
 
       timePickerVisible(val) {
-        if (val) this.$refs.timepicker.ajustScrollTop();
+        if (val) this.$nextTick(() => this.$refs.timepicker.ajustScrollTop());
       },
 
       selectionMode(newVal) {
@@ -163,11 +137,8 @@
       }
     },
 
-    ready() {
-      if (this.date && !this.year) {
-        this.year = this.date.getFullYear();
-        this.month = this.date.getMonth();
-      }
+    directives: {
+      Clickoutside: require('main/utils/clickoutside').default
     },
 
     methods: {
@@ -276,8 +247,10 @@
         this.resetDate();
       },
 
-      handleYearPick(year) {
+      handleYearPick(year, close = true) {
         this.year = year;
+        if (!close) return;
+
         this.date.setFullYear(year);
         if (this.selectionMode === 'year') {
           this.$emit('pick', year);
@@ -311,6 +284,10 @@
           this.year = this.date.getFullYear();
           this.month = this.date.getMonth();
         }
+      },
+
+      closeTimePicker() {
+        this.timePickerVisible = false;
       }
     },
 
@@ -321,14 +298,27 @@
       DateTable: require('../basic/date-table')
     },
 
-    compiled() {
+    mounted() {
       if (this.selectionMode === 'month') {
         this.currentView = 'month';
       }
+
+      if (this.date && !this.year) {
+        this.year = this.date.getFullYear();
+        this.month = this.date.getMonth();
+      }
     },
 
     data() {
       return {
+        date: new Date(),
+        value: '',
+        showTime: false,
+        selectionMode: 'day',
+        shortcuts: '',
+        visible: false,
+        currentView: 'date',
+        disabledDate: '',
         year: null,
         month: null,
         week: null,
diff --git a/packages/date-picker/src/panel/time-range.vue b/packages/date-picker/src/panel/time-range.vue
index 6d9564061..4a1b648a5 100644
--- a/packages/date-picker/src/panel/time-range.vue
+++ b/packages/date-picker/src/panel/time-range.vue
@@ -1,48 +1,49 @@
 <template>
-  <div
-    v-show="visible"
-    transition="md-fade-bottom"
-    class="el-time-range-picker el-picker-panel">
-    <div class="el-time-range-picker__content">
-      <div class="el-time-range-picker__cell">
-        <div class="el-time-range-picker__header">开始时间</div>
-        <div class="el-time-range-picker__body el-time-panel__content">
-          <time-spinner
-            v-ref:min-spinner
-            :show-seconds="showSeconds"
-            @change="handleMinChange"
-            @select-range="setMinSelectionRange"
-            :hours="minHours"
-            :minutes="minMinutes"
-            :seconds="minSeconds">
-          </time-spinner>
+  <transition name="md-fade-bottom">
+    <div
+      v-show="visible"
+      class="el-time-range-picker el-picker-panel">
+      <div class="el-time-range-picker__content">
+        <div class="el-time-range-picker__cell">
+          <div class="el-time-range-picker__header">开始时间</div>
+          <div class="el-time-range-picker__body el-time-panel__content">
+            <time-spinner
+              ref="minSpinner"
+              :show-seconds="showSeconds"
+              @change="handleMinChange"
+              @select-range="setMinSelectionRange"
+              :hours="minHours"
+              :minutes="minMinutes"
+              :seconds="minSeconds">
+            </time-spinner>
+          </div>
+        </div>
+        <div class="el-time-range-picker__cell">
+          <div class="el-time-range-picker__header">结束时间</div>
+          <div class="el-time-range-picker__body el-time-panel__content">
+            <time-spinner
+              ref="maxSpinner"
+              :show-seconds="showSeconds"
+              @change="handleMaxChange"
+              @select-range="setMaxSelectionRange"
+              :hours="maxHours"
+              :minutes="maxMinutes"
+              :seconds="maxSeconds">
+            </time-spinner>
+          </div>
         </div>
       </div>
-      <div class="el-time-range-picker__cell">
-        <div class="el-time-range-picker__header">结束时间</div>
-        <div class="el-time-range-picker__body el-time-panel__content">
-          <time-spinner
-            v-ref:max-spinner
-            :show-seconds="showSeconds"
-            @change="handleMaxChange"
-            @select-range="setMaxSelectionRange"
-            :hours="maxHours"
-            :minutes="maxMinutes"
-            :seconds="maxSeconds">
-          </time-spinner>
-        </div>
+      <div class="el-time-panel__footer">
+        <button
+          class="el-time-panel__btn cancel"
+          @click="handleCancel()">取消</button>
+        <button
+          class="el-time-panel__btn confirm"
+          @click="handleConfirm()"
+          :disabled="btnDisabled">确定</button>
       </div>
     </div>
-    <div class="el-time-panel__footer">
-      <button
-        class="el-time-panel__btn cancel"
-        @click="handleCancel()">取消</button>
-      <button
-        class="el-time-panel__btn confirm"
-        @click="handleConfirm()"
-        :disabled="btnDisabled">确定</button>
-    </div>
-  </div>
+  </transition>
 </template>
 
 <script type="text/ecmascript-6">
@@ -62,127 +63,36 @@
       TimeSpinner: require('../basic/time-spinner')
     },
 
-    props: {
-      minTime: {
-        default() {
-          return new Date();
-        }
-      },
-
-      maxTime: {
-        default() {
-          const date = new Date();
-          date.setHours(date.getHours() + 1);
-          return date;
-        }
-      },
-
-      format: {
-        default: 'HH:mm:ss'
-      },
-
-      visible: Boolean
-    },
-
     computed: {
       showSeconds() {
         return (this.format || '').indexOf('ss') !== -1;
-      },
-
-      minHours: {
-        get() {
-          if (this.minTime) {
-            return this.minTime.getHours();
-          }
-          return 0;
-        },
-        set(hours) {
-          if (this.minTime) {
-            this.minTime.setHours(hours);
-          }
-        }
-      },
-
-      minMinutes: {
-        get() {
-          if (this.minTime) {
-            return this.minTime.getMinutes();
-          }
-          return 0;
-        },
-        set(minutes) {
-          if (this.minTime) {
-            this.minTime.setMinutes(minutes);
-          }
-        }
-      },
-
-      minSeconds: {
-        get() {
-          if (this.minTime) {
-            return this.minTime.getSeconds();
-          }
-          return 0;
-        },
-        set(seconds) {
-          if (this.minTime) {
-            this.minTime.setSeconds(seconds);
-          }
-        }
-      },
-
-      maxHours: {
-        get() {
-          if (this.maxTime) {
-            return this.maxTime.getHours();
-          }
-          return 0;
-        },
-        set(hours) {
-          if (this.maxTime) {
-            this.maxTime.setHours(hours);
-          }
-        }
-      },
-
-      maxMinutes: {
-        get() {
-          if (this.maxTime) {
-            return this.maxTime.getMinutes();
-          }
-          return 0;
-        },
-        set(minutes) {
-          if (this.maxTime) {
-            this.maxTime.setMinutes(minutes);
-          }
-        }
-      },
-
-      maxSeconds: {
-        get() {
-          if (this.maxTime) {
-            return this.maxTime.getSeconds();
-          }
-          return 0;
-        },
-        set(seconds) {
-          if (this.maxTime) {
-            this.maxTime.setSeconds(seconds);
-          }
-        }
       }
     },
 
     data() {
+      const minTime = new Date();
+      const date = new Date();
+      date.setHours(date.getHours() + 1);
+      const maxTime = date;
+
       return {
-        btnDisabled: isDisabled(this.minTime, this.maxTime)
+        minTime: minTime,
+        maxTime: maxTime,
+        btnDisabled: isDisabled(minTime, maxTime),
+        maxHours: minTime.getHours(),
+        maxMinutes: minTime.getMinutes(),
+        maxSeconds: minTime.getSeconds(),
+        minHours: maxTime.getHours(),
+        minMinutes: maxTime.getMinutes(),
+        minSeconds: maxTime.getSeconds(),
+        format: 'HH:mm:ss',
+        visible: false
       };
     },
 
     methods: {
       handleCancel() {
-        this.$emit('pick', null);
+        this.$emit('pick');
       },
 
       handleChange() {
@@ -192,16 +102,35 @@
       },
 
       handleMaxChange(date) {
-        if (date.hours !== undefined) this.maxHours = date.hours;
-        if (date.minutes !== undefined) this.maxMinutes = date.minutes;
-        if (date.seconds !== undefined) this.maxSeconds = date.seconds;
+        if (date.hours !== undefined) {
+          this.maxTime.setHours(date.hours);
+          this.maxHours = this.maxTime.getHours();
+        }
+        if (date.minutes !== undefined) {
+          this.maxTime.setMinutes(date.minutes);
+          this.maxMinutes = this.maxTime.getMinutes();
+        }
+        if (date.seconds !== undefined) {
+          this.maxTime.setSeconds(date.seconds);
+          this.maxSeconds = this.maxTime.getSeconds();
+        }
         this.handleChange();
       },
 
       handleMinChange(date) {
-        if (date.hours !== undefined) this.minHours = date.hours;
-        if (date.minutes !== undefined) this.minMinutes = date.minutes;
-        if (date.seconds !== undefined) this.minSeconds = date.seconds;
+        if (date.hours !== undefined) {
+          this.minTime.setHours(date.hours);
+          this.minHours = this.minTime.getHours();
+        }
+        if (date.minutes !== undefined) {
+          this.minTime.setMinutes(date.minutes);
+          this.minMinutes = this.minTime.getMinutes();
+        }
+        if (date.seconds !== undefined) {
+          this.minTime.setSeconds(date.seconds);
+          this.minSeconds = this.minTime.getSeconds();
+        }
+
         this.handleChange();
       },
 
@@ -228,8 +157,8 @@
         this.$refs.maxSpinner.ajustScrollTop();
       },
 
-      focusEditor(...args) {
-        return this.$refs.minSpinner.focusEditor(...args);
+      focusEditor(val) {
+        return this.$refs.minSpinner.focusEditor(val);
       }
     },
 
diff --git a/packages/date-picker/src/panel/time-select.vue b/packages/date-picker/src/panel/time-select.vue
index 2af5d8e2e..9d1ac67b4 100644
--- a/packages/date-picker/src/panel/time-select.vue
+++ b/packages/date-picker/src/panel/time-select.vue
@@ -1,18 +1,19 @@
 <template>
-  <div
-    v-show="visible"
-    class="el-picker-panel time-select"
-    transition="md-fade-bottom">
-    <div class="el-picker-panel__content">
-      <div class="time-select-item"
-        v-for="item in items"
-        :class="{ selected: value === item.value, disabled: item.disabled }"
-        :disabled="item.disabled"
-        @click="handleClick(item)">
-        {{ item.value }}
+  <transition name="md-fade-bottom">
+    <div
+      v-show="visible"
+      class="el-picker-panel time-select">
+      <div class="el-picker-panel__content">
+        <div class="time-select-item"
+          v-for="item in items"
+          :class="{ selected: value === item.value, disabled: item.disabled }"
+          :disabled="item.disabled"
+          @click="handleClick(item)">
+          {{ item.value }}
+        </div>
       </div>
     </div>
-  </div>
+  </transition>
 </template>
 
 <script type="text/ecmascript-6">
@@ -67,26 +68,6 @@
   };
 
   export default {
-    props: {
-      start: {
-        default: '09:00'
-      },
-
-      end: {
-        default: '18:00'
-      },
-
-      step: {
-        default: '00:30'
-      },
-
-      value: {},
-
-      visible: Boolean,
-
-      minTime: {}
-    },
-
     watch: {
       minTime(val) {
         if (this.value && val && compareTime(this.value, val) === -1) {
@@ -99,11 +80,21 @@
       handleClick(item) {
         if (!item.disabled) {
           this.$emit('pick', item.value);
-          this.value = item.value;
         }
       }
     },
 
+    data() {
+      return {
+        start: '09:00',
+        end: '18:00',
+        step: '00:30',
+        value: '',
+        visible: false,
+        minTime: ''
+      };
+    },
+
     computed: {
       items() {
         const start = this.start;
diff --git a/packages/date-picker/src/panel/time.vue b/packages/date-picker/src/panel/time.vue
index 556ed5ffc..868b1a039 100644
--- a/packages/date-picker/src/panel/time.vue
+++ b/packages/date-picker/src/panel/time.vue
@@ -1,32 +1,34 @@
 <template>
-  <div
-    v-show="visible"
-    transition="md-fade-bottom"
-    class="el-time-panel">
-    <div class="el-time-panel__content">
-      <time-spinner
-        v-ref:spinner
-        @change="handleChange"
-        :show-seconds="showSeconds"
-        :hours="hours"
-        :minutes="minutes"
-        @select-range="setSelectionRange"
-        :seconds="seconds">
-      </time-spinner>
+  <transition name="md-fade-bottom">
+    <div
+      v-show="visible"
+      class="el-time-panel">
+      <div class="el-time-panel__content">
+        <time-spinner
+          ref="spinner"
+          @change="handleChange"
+          :show-seconds="showSeconds"
+          @select-range="setSelectionRange"
+          :hours="hours"
+          :minutes="minutes"
+          :seconds="seconds">
+        </time-spinner>
+      </div>
+      <div class="el-time-panel__footer">
+        <button
+          class="el-time-panel__btn cancel"
+          @click="handleCancel()">取消</button>
+        <button
+          class="el-time-panel__btn confirm"
+          @click="handleConfirm()">确定</button>
+      </div>
     </div>
-    <div class="el-time-panel__footer">
-      <button
-        class="el-time-panel__btn
-        cancel" @click="handleCancel()">取消</button>
-      <button
-        class="el-time-panel__btn confirm"
-        @click="handleConfirm()">确定</button>
-    </div>
-  </div>
+  </transition>
 </template>
 
 <script type="text/ecmascript-6">
   import { limitRange } from '../util';
+  import Vue from 'vue';
 
   export default {
     components: {
@@ -35,77 +37,46 @@
 
     props: {
       date: {
-        default() {
-          return new Date();
-        }
+        default: new Date()
       },
 
-      format: {
-        default: 'HH:mm:ss'
-      },
-
-      value: {},
-
-      visible: Boolean,
-
-      selectableRange: {}
+      visible: false
     },
 
     watch: {
       value(newVal) {
+        let date;
         if (newVal instanceof Date) {
-          this.date = newVal;
+          date = limitRange(newVal, this.selectableRange);
         } else if (!newVal) {
-          this.date = new Date();
+          date = new Date();
         }
+
+        this.hours = date.getHours();
+        this.minutes = date.getMinutes();
+        this.seconds = date.getSeconds();
+        this.handleConfirm(true);
+      },
+
+      selectableRange(val) {
+        this.$refs.spinner.selectableRange = val;
       }
     },
 
+    data() {
+      return {
+        format: 'HH:mm:ss',
+        value: '',
+        hours: 0,
+        minutes: 0,
+        seconds: 0,
+        selectableRange: []
+      };
+    },
+
     computed: {
       showSeconds() {
         return (this.format || '').indexOf('ss') !== -1;
-      },
-
-      hours: {
-        get() {
-          if (this.date) {
-            return this.date.getHours();
-          }
-          return 0;
-        },
-        set(hours) {
-          if (this.date) {
-            this.date.setHours(hours);
-          }
-        }
-      },
-
-      minutes: {
-        get() {
-          if (this.date) {
-            return this.date.getMinutes();
-          }
-          return 0;
-        },
-        set(minutes) {
-          if (this.date) {
-            this.date.setMinutes(minutes);
-          }
-        }
-      },
-
-      seconds: {
-        get() {
-          if (this.date) {
-            return this.date.getSeconds();
-          }
-          return 0;
-        },
-        set(seconds) {
-          if (this.date) {
-            this.date.setSeconds(seconds);
-          }
-        }
       }
     },
 
@@ -115,9 +86,19 @@
       },
 
       handleChange(date) {
-        if (date.hours !== undefined) this.hours = date.hours;
-        if (date.minutes !== undefined) this.minutes = date.minutes;
-        if (date.seconds !== undefined) this.seconds = date.seconds;
+        if (date.hours !== undefined) {
+          this.date.setHours(date.hours);
+          this.hours = this.date.getHours();
+        }
+        if (date.minutes !== undefined) {
+          this.date.setMinutes(date.minutes);
+          this.minutes = this.date.getMinutes();
+        }
+        if (date.seconds !== undefined) {
+          this.date.setSeconds(date.seconds);
+          this.seconds = this.date.getSeconds();
+        }
+
         this.handleConfirm(true);
       },
 
@@ -126,20 +107,13 @@
       },
 
       handleConfirm(visible = false, first) {
-        const spinner = this.$refs.spinner;
-        let date = new Date();
+        const date = new Date(limitRange(this.date, this.selectableRange));
 
-        const { hours, minutes, seconds } = spinner;
-        date.setHours(hours);
-        date.setMinutes(minutes);
-        date.setSeconds(seconds);
-
-        this.date = date = limitRange(date, this.selectableRange);
         this.$emit('pick', date, visible, first);
       },
 
-      focusEditor(...args) {
-        return this.$refs.spinner.focusEditor(...args);
+      focusEditor(val) {
+        return this.$refs.spinner.focusEditor(val);
       },
 
       ajustScrollTop() {
@@ -147,8 +121,16 @@
       }
     },
 
-    ready() {
-      this.$refs.spinner.selectableRange = this.selectableRange;
+    created() {
+      !this.date && Vue.set(this, 'date', new Date());
+      !this.visible && Vue.set(this, 'visible', false);
+
+      this.hours = this.date.getHours();
+      this.minutes = this.date.getMinutes();
+      this.seconds = this.date.getSeconds();
+    },
+
+    mounted() {
       this.$nextTick(() => this.handleConfirm(true, true));
     }
   };
diff --git a/packages/date-picker/src/picker.vue b/packages/date-picker/src/picker.vue
index b0fdc217a..fafe13347 100644
--- a/packages/date-picker/src/picker.vue
+++ b/packages/date-picker/src/picker.vue
@@ -1,31 +1,29 @@
 <template>
   <span
     class="el-date-editor"
-    v-clickoutside="pickerVisible = false"
+    v-clickoutside="handleClose"
     :class="{
       'is-have-trigger': haveTrigger,
       'is-active': pickerVisible,
-      'is-filled': !!this.value,
-      'is-lg': size === 'lg', 'is-sm': size === 'sm'
+      'is-filled': !!this.value
     }">
 
     <input
-      lazy
       class="el-date-editor__editor"
       :readonly="readonly"
       :type="editorType"
       :placeholder="placeholder"
-      :style="{ height: height ? height + 'px' : '' }"
       @focus="handleFocus"
       @blur="handleBlur"
-      @keydown="handleKeydown($event)"
-      @keyup="handleKeyup($event)"
-      v-el:reference
-      v-model="visualValue" />
+      @keydown="handleKeydown"
+      @keyup="handleKeyup"
+      ref="reference"
+      v-model.lazy="visualValue" />
 
     <span
       @click="togglePicker()"
-      class="el-date-editor__trigger el-icon {{triggerClass}}"
+      class="el-date-editor__trigger el-icon"
+      :class="[triggerClass]"
       v-if="haveTrigger">
     </span>
   </span>
@@ -33,6 +31,7 @@
 
 <script>
 import Vue from 'vue';
+import Clickoutside from 'main/utils/clickoutside';
 import { merge, formatDate, parseDate, getWeekNumber } from './util';
 import Popper from 'main/utils/popper.js';
 
@@ -189,7 +188,7 @@ export default {
   },
 
   directives: {
-    clickoutside: require('vue-clickoutside')
+    Clickoutside
   },
 
   data() {
@@ -254,11 +253,11 @@ export default {
           const parsedValue = parser(value, this.format || DEFAULT_FORMATS[type]);
 
           if (parsedValue) {
-            this.value = parsedValue;
+            this.$emit('input', parsedValue);
           }
           return;
         }
-        this.value = value;
+        this.$emit('input', value);
       }
     },
 
@@ -268,6 +267,10 @@ export default {
   },
 
   methods: {
+    handleClose() {
+      this.pickerVisible = false;
+    },
+
     handleFocus() {
       const type = this.type;
 
@@ -331,7 +334,8 @@ export default {
       const parsedValue = parser(value, this.format || DEFAULT_FORMATS[type]);
 
       if (!parsedValue) return;
-      this.picker.value = this.value = parsedValue;
+      this.picker.value = parsedValue;
+      this.$emit('input', parsedValue);
 
       if (this.type.indexOf('date') > -1) return;
 
@@ -389,8 +393,7 @@ export default {
     showPicker() {
       if (!this.picker) {
         this.picker = new Vue(merge({
-          el: document.createElement('div'),
-          replace: true
+          el: document.createElement('div')
         }, this.panel));
         this.picker.showTime = this.type === 'datetime' || this.type === 'datetimerange';
         this.picker.selectionMode = this.selectionMode;
@@ -427,7 +430,7 @@ export default {
         this.picker.resetView && this.picker.resetView();
 
         this.picker.$on('pick', (date, visible = false) => {
-          this.value = date;
+          this.$emit('input', date);
 
           if (!visible) {
             this.pickerVisible = this.picker.visible = false;
@@ -437,8 +440,8 @@ export default {
 
         this.picker.$on('select-range', (start, end) => {
           setTimeout(() => {
-            this.$els.reference.setSelectionRange(start, end);
-            this.$els.reference.focus();
+            this.$refs.reference.setSelectionRange(start, end);
+            this.$refs.reference.focus();
           }, 0);
         });
       } else {
@@ -451,7 +454,7 @@ export default {
           return;
         }
 
-        this.popper = new Popper(this.$els.reference, this.picker.$el, {
+        this.popper = new Popper(this.$refs.reference, this.picker.$el, {
           gpuAcceleration: false,
           placement: 'bottom-start',
           boundariesPadding: 0,
diff --git a/packages/date-picker/src/util/index.js b/packages/date-picker/src/util/index.js
index a6ddbeffd..db86c03f4 100644
--- a/packages/date-picker/src/util/index.js
+++ b/packages/date-picker/src/util/index.js
@@ -143,7 +143,7 @@ export const getRangeHours = function(ranges) {
 };
 
 export const limitRange = function(date, ranges) {
-  if (!ranges) return date;
+  if (!ranges || !ranges.length) return date;
 
   const len = ranges.length;
   const format = 'HH:mm:ss';
diff --git a/packages/pagination/src/pagination.js b/packages/pagination/src/pagination.js
index efca5af1a..82a7b56d2 100644
--- a/packages/pagination/src/pagination.js
+++ b/packages/pagination/src/pagination.js
@@ -49,7 +49,7 @@ export default {
     const TEMPLATE_MAP = {
       prev: <prev></prev>,
       jumper: <jumper></jumper>,
-      pager: <pager prop-currentPage={ this.internalCurrentPage } prop-pageCount={ this.pageCount } on-currentChange={ this.handleCurrentChange }></pager>,
+      pager: <pager currentPage={ this.internalCurrentPage } pageCount={ this.pageCount } on-currentChange={ this.handleCurrentChange }></pager>,
       next: <next></next>,
       sizes: <sizes></sizes>,
       slot: <slot></slot>,
@@ -118,15 +118,15 @@ export default {
         return (
           <span class="el-pagination__sizes">
             <el-select
-              prop-size="small"
-              prop-value={ this.$parent.internalPageSize }
+              size="small"
+              value={ this.$parent.internalPageSize }
               on-change={ this.handleChange }
-              prop-width={ 110 }>
+              width={ 110 }>
               {
                 this.$parent.pageSizes.map(item =>
                     <el-option
-                      prop-value={ item }
-                      prop-label={ item + ' 条/页' }>
+                      value={ item }
+                      label={ item + ' 条/页' }>
                     </el-option>
                   )
               }
diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue
index 1d25e8d42..74d7fd22f 100644
--- a/packages/select/src/select.vue
+++ b/packages/select/src/select.vue
@@ -46,16 +46,17 @@
       :style="{ 'width': inputWidth + 'px' }"
       v-element-clickoutside="handleClose">
     </el-input>
-    <el-select-menu
-      ref="popper"
-      v-show="visible && nodataText !== false"
-      transition="fade"
-      :style="{ 'width': dropdownWidth ? dropdownWidth + 'px' : '100%' }">
-      <ul class="el-select-dropdown__list" v-show="options.length > 0 && filteredOptionsCount > 0">
-        <slot></slot>
-      </ul>
-      <p class="el-select-dropdown__nodata" v-if="nodataText">{{ nodataText }}</p>
-    </el-select-menu>
+    <transition name="md-fade-bottom">
+      <el-select-menu
+        ref="popper"
+        v-show="visible && nodataText !== false"
+        :style="{ 'width': dropdownWidth ? dropdownWidth + 'px' : '100%' }">
+        <ul class="el-select-dropdown__list" v-show="options.length > 0 && filteredOptionsCount > 0">
+          <slot></slot>
+        </ul>
+        <p class="el-select-dropdown__nodata" v-if="nodataText">{{ nodataText }}</p>
+      </el-select-menu>
+    </transition>
   </div>
 </template>
 
@@ -195,7 +196,7 @@
           this.valueChangeBySelected = false;
           return;
         }
-        if (this.multiple && Object.prototype.toString.call(val) === '[object Array]') {
+        if (this.multiple && Array.isArray(val)) {
           this.$nextTick(() => {
             this.resetInputHeight();
           });
diff --git a/packages/theme-default/src/spinner.css b/packages/theme-default/src/spinner.css
index 6d9d3a0c3..40ed622b3 100644
--- a/packages/theme-default/src/spinner.css
+++ b/packages/theme-default/src/spinner.css
@@ -2,6 +2,11 @@
 @import "./common/var.css";
 
 @component-namespace el {
+  @b time-spinner {
+    display: flex;
+    width: 100%;
+  }
+
   @b spinner {
     display: inline-block;
     vertical-align: middle;
@@ -10,13 +15,13 @@
     animation: rotate 2s linear infinite;
     width: 50px;
     height: 50px;
-    
+
     & .path {
       stroke: #ececec;
       stroke-linecap: round;
       animation: dash 1.5s ease-in-out infinite;
     }
-    
+
   }
 }
 @keyframes rotate {