diff --git a/packages/date-picker/src/basic/time-spinner.vue b/packages/date-picker/src/basic/time-spinner.vue
index b111d7ae5f8..227a547c43a 100644
--- a/packages/date-picker/src/basic/time-spinner.vue
+++ b/packages/date-picker/src/basic/time-spinner.vue
@@ -30,6 +30,7 @@
       </ul>
     </div>
     <div
+      v-show="showSeconds"
       @mouseenter="emitSelectRange('seconds')"
       @mousewheel="handleScroll('second')"
       class="el-time-spinner__wrapper"
diff --git a/packages/date-picker/src/panel/time-range.vue b/packages/date-picker/src/panel/time-range.vue
index 94d21fcee68..3891741f926 100644
--- a/packages/date-picker/src/panel/time-range.vue
+++ b/packages/date-picker/src/panel/time-range.vue
@@ -68,6 +68,7 @@
     date.setHours(date.getHours() + 1);
     const maxTime = time[1] || date;
 
+    if (minTime > maxTime) return clacTime();
     return { minTime, maxTime };
   };
 
diff --git a/packages/date-picker/src/panel/time.vue b/packages/date-picker/src/panel/time.vue
index dc089f9a04c..30084ad28a2 100644
--- a/packages/date-picker/src/panel/time.vue
+++ b/packages/date-picker/src/panel/time.vue
@@ -31,7 +31,6 @@
 
 <script type="text/babel">
   import { limitRange } from '../util';
-  import Vue from 'vue';
   import { $t } from '../util';
 
   export default {
@@ -86,8 +85,8 @@
         minutes: 0,
         seconds: 0,
         selectableRange: [],
-        currentDate: this.$options.defaultValue || this.date,
-        currentVisible: this.visible,
+        currentDate: this.$options.defaultValue || this.date || new Date(),
+        currentVisible: this.visible || false,
         width: this.pickerWidth || 0
       };
     },
@@ -140,9 +139,6 @@
     },
 
     created() {
-      !this.currentDate && Vue.set(this, 'currentDate', new Date());
-      !this.currentVisible && Vue.set(this, 'currentVisible', false);
-
       this.hours = this.currentDate.getHours();
       this.minutes = this.currentDate.getMinutes();
       this.seconds = this.currentDate.getSeconds();
diff --git a/test/unit/specs/time-picker.spec.js b/test/unit/specs/time-picker.spec.js
index 6e1b109457c..8a57aadb330 100644
--- a/test/unit/specs/time-picker.spec.js
+++ b/test/unit/specs/time-picker.spec.js
@@ -1,4 +1,4 @@
-import { createTest } from '../util';
+import { createTest, destroyVM } from '../util';
 import TimePicker from 'packages/time-picker';
 import Vue from 'vue';
 
@@ -10,6 +10,7 @@ describe('TimePicker', () => {
     });
     expect(vm.$el.querySelector('input').getAttribute('placeholder')).to.equal('test');
     expect(vm.$el.querySelector('input').getAttribute('readonly')).to.ok;
+    destroyVM(vm);
   });
 
   it('format', () => {
@@ -18,6 +19,7 @@ describe('TimePicker', () => {
       value: new Date(2016, 9, 10, 18, 40)
     });
     expect(vm.$el.querySelector('input').value).to.equal('18-40-00');
+    destroyVM(vm);
   });
 
   it('default value', done => {
@@ -37,6 +39,7 @@ describe('TimePicker', () => {
       expect(times[0].textContent).to.equal('18');
       expect(times[1].textContent).to.equal('40');
       expect(times[2].textContent).to.equal('0');
+      destroyVM(vm);
       done();
     });
   });
@@ -70,11 +73,80 @@ describe('TimePicker', () => {
         expect(date.getHours()).to.equal(4);
         expect(date.getMinutes()).to.equal(36);
         expect(date.getSeconds()).to.equal(20);
+        destroyVM(vm);
         done();
       });
     });
   });
 
+  it('click cancel button', done => {
+    const vm = createTest(TimePicker, true);
+    const input = vm.$el.querySelector('input');
+
+    input.blur();
+    input.focus();
+
+    Vue.nextTick(_ => {
+      vm.picker.$el.querySelector('.el-time-panel__btn.cancel').click();
+
+      Vue.nextTick(_ => {
+        expect(vm.picker.currentDate).to.empty;
+        done();
+      });
+    });
+  });
+
+  it('click confirm button', done => {
+    const vm = createTest(TimePicker, true);
+    const input = vm.$el.querySelector('input');
+
+    input.blur();
+    input.focus();
+
+    Vue.nextTick(_ => {
+      vm.picker.$el.querySelector('.el-time-panel__btn.confirm').click();
+
+      Vue.nextTick(_ => {
+        expect(vm.picker.currentDate).to.exist;
+        done();
+      });
+    });
+  });
+
+  it('set format', done => {
+    const vm = createTest(TimePicker, {
+      pickerOptions: {
+        format: 'HH:mm'
+      }
+    }, true);
+    const input = vm.$el.querySelector('input');
+    input.blur();
+    input.focus();
+
+    setTimeout(_ => {
+      expect(vm.picker.$el.querySelectorAll('.el-time-spinner__wrapper')[2].style.display).to.equal('none');
+      destroyVM(vm);
+      done();
+    }, 20);
+  });
+
+  it('set format to empty', done => {
+    const vm = createTest(TimePicker, {
+      pickerOptions: {
+        format: ''
+      }
+    }, true);
+    const input = vm.$el.querySelector('input');
+    input.blur();
+    input.focus();
+
+    setTimeout(_ => {
+      expect(vm.picker.$el.querySelectorAll('.el-time-spinner__wrapper')[2].style.display).to.equal('none');
+      destroyVM(vm);
+      done();
+    }, 20);
+  });
+
   it('selectableRange', done => {
     const vm = createTest(TimePicker, {
       pickerOptions: {
@@ -95,7 +167,60 @@ describe('TimePicker', () => {
 
       hoursElm.querySelectorAll('.disabled')[0].click();
       expect(disabledHours).to.not.include.members([18, 19, 20]);
+      destroyVM(vm);
+      done();
+    }, 20);
+  });
+});
+
+describe('TimePicker(range)', () => {
+  let vm;
+  beforeEach(done => {
+    vm = createTest(TimePicker, {
+      isRange: true,
+      value: [new Date(2016, 9, 10, 18, 40), new Date(2016, 9, 10, 19, 40)]
+    }, true);
+    const input = vm.$el.querySelector('input');
+
+    input.blur();
+    input.focus();
+    input.blur();
+    setTimeout(done, 20);
+  });
+
+  afterEach(() => destroyVM(vm));
+
+  it('create', () => {
+    expect(vm.picker.$el.querySelectorAll('.el-time-range-picker__cell')).to.length(2);
+  });
+
+  it('default value', () => {
+    expect(vm.picker.minTime.getTime()).to.equal(new Date(2016, 9, 10, 18, 40).getTime());
+    expect(vm.picker.maxTime.getTime()).to.equal(new Date(2016, 9, 10, 19, 40).getTime());
+  });
+
+  it('minTime < maxTime', done => {
+    const vm2 = createTest(TimePicker, {
+      isRange: true,
+      value: [new Date(2016, 9, 10, 21, 40), new Date(2016, 9, 10, 20, 40)]
+    }, true);
+    const input = vm2.$el.querySelector('input');
+
+    input.blur();
+    input.focus();
+    input.blur();
+    setTimeout(() => {
+      expect(vm2.picker.maxTime > vm2.picker.minTime).to.true;
+      destroyVM(vm2);
       done();
-    }, 150);
+    }, 20);
+  });
+
+  it('click cancel button', done => {
+    vm.picker.$el.querySelector('.el-time-panel__btn.cancel').click();
+    Vue.nextTick(_ => {
+      expect(vm.picker.currentDate).to.empty;
+      done();
+    });
   });
 });