update time/date picker

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: ''
       };
     }
   };

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>

examples/docs/time-picker.md

@@ -8,9 +8,9 @@
 
 ## 固定时间点
 提供几个固定的时间点供用户选择。
-{{value}}
 <div class="demo-box">
   <el-time-select
+    v-model="value1"
     :picker-options="{
       start: '08:30',
       step: '00:15',
@@ -37,7 +37,7 @@
 
 <div class="demo-box">
   <el-time-picker
-    v-model="value"
+    v-model="value2"
     placeholder="任意时间点">
   </el-time-picker>
 </div>
@@ -52,6 +52,7 @@
 ### 通用 - 手动输入规则
 <div class="demo-box">
   <el-time-picker
+    v-model="value3"
     placeholder="任意时间点">
   </el-time-picker>
 </div>
@@ -67,6 +68,7 @@
 
 <div class="demo-box">
   <el-time-picker
+    v-model="value4"
     :picker-options="{
       selectableRange: '18:30:00 - 20:30:00'
     }"
@@ -187,6 +189,7 @@
 <div class="demo-box">
   <el-time-picker
     is-range
+    v-model="value5"
     placeholder="选择时间范围">
   </el-time-picker>
 </div>
@@ -194,6 +197,7 @@
 ```html
 <el-time-picker
   is-range
+  v-model="value"
   placeholder="选择时间范围">
 </el-time-picker>
 ```
@@ -202,7 +206,11 @@
   export default {
     data() {
       return {
-        value: '',
+        value1: '',
+        value2: '',
+        value3: '',
+        value4: '',
+        value5: '',
         startTime: '',
         endTime: '',
         startTime2: '',

packages/date-picker/package.json

@@ -15,6 +15,6 @@
     "wind-dom": "0.0.3"
   },
   "devDependencies": {
-    "vue": "^2.0.0"
+    "vue": "^2.0.0-beta.7"
   }
 }

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
           });
         }

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);
       }

packages/date-picker/src/basic/time-spinner.vue

@@ -9,7 +9,7 @@
         <li
           @click="handleClick('hours', { value: hour, disabled: disabled }, true)"
           v-for="(disabled, hour) in hoursList"
-          track-by="$index"
+          track-by="hour"
           class="el-time-spinner__item"
           :class="{ 'active': hour === hours, 'disabled': disabled }"
           v-text="hour"></li>
@@ -67,9 +67,7 @@
       showSeconds: {
         type: Boolean,
         default: true
-      },
-
-      selectableRange: {}
+      }
     },
 
     watch: {
@@ -109,7 +107,8 @@
       return {
         hoursPrivate: 0,
         minutesPrivate: 0,
-        secondsPrivate: 0
+        secondsPrivate: 0,
+        selectableRange: []
       };
     },
 

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);
         }
       }

packages/date-picker/src/panel/date.vue

 <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">
+  <transition name="md-fade-bottom">
+    <div
+      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
-              @focus="timePickerVisible = true"
-              v-model="visibleTime"
-              placehoder="选择时间"
+              placehoder="选择日期"
               type="text"
+              v-model="visibleDate"
               class="el-date-picker__editor">
-            <time-picker
-              ref="timepicker"
+            <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"
-              @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
-            ref="yearTable"
-            :year="year"
-            v-show="currentView === 'year'"
-            @pick="handleYearPick">
-          </year-table>
-          <month-table
-            :month="month"
-            v-show="currentView === 'month'"
-            @pick="handleMonthPick">
-          </month-table>
+              :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>
 
-    <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
+        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,

packages/date-picker/src/panel/time-range.vue

 <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
-            ref="minSpinner"
-            :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>
-      <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 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-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);
       }
     },
 

packages/date-picker/src/panel/time-select.vue

 <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) {
@@ -103,6 +84,17 @@
       }
     },
 
+    data() {
+      return {
+        start: '09:00',
+        end: '18:00',
+        step: '00:30',
+        value: '',
+        visible: false,
+        minTime: ''
+      };
+    },
+
     computed: {
       items() {
         const start = this.start;

packages/date-picker/src/panel/time.vue

 <template>
-  <div
-    v-show="visible"
-    transition="md-fade-bottom"
-    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>
+  <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: {
@@ -34,33 +36,41 @@
     },
 
     props: {
-      format: {
-        default: 'HH:mm:ss'
+      date: {
+        default: new Date()
       },
 
-      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 {
-        date: new Date(),
+        format: 'HH:mm:ss',
+        value: '',
         hours: 0,
         minutes: 0,
-        seconds: 0
+        seconds: 0,
+        selectableRange: []
       };
     },
 
@@ -97,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() {
@@ -119,13 +122,15 @@
     },
 
     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.$refs.spinner.selectableRange = this.selectableRange;
       this.$nextTick(() => this.handleConfirm(true, true));
     }
   };

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';

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>
                   )
               }

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();
           });

src/index.js

 // import Group from '../packages/group/index.js';
 // import SelectDropdown from '../packages/select-dropdown/index.js';
-// import Pagination from '../packages/pagination/index.js';
+import Pagination from '../packages/pagination/index.js';
 // import Dialog from '../packages/dialog/index.js';
 // import Cascader from '../packages/cascader/index.js';
 // import Autocomplete from '../packages/autocomplete/index.js';
@@ -20,7 +20,7 @@
 // import Switch from '../packages/switch/index.js';
 import Select from '../packages/select/index.js';
 import Option from '../packages/option/index.js';
-// import OptionGroup from '../packages/option-group/index.js';
+import OptionGroup from '../packages/option-group/index.js';
 // import Button from '../packages/button/index.js';
 // import ButtonGroup from '../packages/button-group/index.js';
 // import Table from '../packages/table/index.js';
@@ -37,7 +37,7 @@ import TimePicker from '../packages/time-picker/index.js';
 // import FormItem from '../packages/form-item/index.js';
 // import Tabs from '../packages/tabs/index.js';
 // import TabPane from '../packages/tab-pane/index.js';
-// import Tag from '../packages/tag/index.js';
+import Tag from '../packages/tag/index.js';
 // import Tree from '../packages/tree/index.js';
 // import Alert from '../packages/alert/index.js';
 // import Notification from '../packages/notification/index.js';
@@ -55,7 +55,7 @@ const install = function(Vue) {
 
   // Vue.component(Group.name, Group);
   // Vue.component(SelectDropdown.name, SelectDropdown);
-  // Vue.component(Pagination.name, Pagination);
+  Vue.component(Pagination.name, Pagination);
   // Vue.component(Dialog.name, Dialog);
   // Vue.component(Cascader.name, Cascader);
   // Vue.component(Autocomplete.name, Autocomplete);
@@ -75,7 +75,7 @@ const install = function(Vue) {
   // Vue.component(Switch.name, Switch);
   Vue.component(Select.name, Select);
   Vue.component(Option.name, Option);
-  // Vue.component(OptionGroup.name, OptionGroup);
+  Vue.component(OptionGroup.name, OptionGroup);
   // Vue.component(Button.name, Button);
   // Vue.component(ButtonGroup.name, ButtonGroup);
   // Vue.component(Table.name, Table);
@@ -91,7 +91,7 @@ const install = function(Vue) {
   // Vue.component(FormItem.name, FormItem);
   // Vue.component(Tabs.name, Tabs);
   // Vue.component(TabPane.name, TabPane);
-  // Vue.component(Tag.name, Tag);
+  Vue.component(Tag.name, Tag);
   // Vue.component(Tree.name, Tree);
   // Vue.component(Alert.name, Alert);
   // Vue.component(Slider.name, Slider);
@@ -120,7 +120,7 @@ module.exports = {
   install,
   // Group,
   // SelectDropdown,
-  // Pagination,
+  Pagination,
   // Dialog,
   // Cascader,
   // Autocomplete,
@@ -140,7 +140,7 @@ module.exports = {
   // Switch,
   Select,
   Option,
-  // OptionGroup,
+  OptionGroup,
   // Button,
   // ButtonGroup,
   // Table,
@@ -157,7 +157,7 @@ module.exports = {
   // FormItem,
   // Tabs,
   // TabPane,
-  // Tag,
+  Tag
   // Tree,
   // Alert,
   // Notification,