diff --git a/packages/date-picker/src/panel/date-range.vue b/packages/date-picker/src/panel/date-range.vue
index fe652eebc..a30ea02dc 100644
--- a/packages/date-picker/src/panel/date-range.vue
+++ b/packages/date-picker/src/panel/date-range.vue
@@ -406,7 +406,7 @@
         this.maxDate = null;
         this.leftDate = calcDefaultValue(this.defaultValue)[0];
         this.rightDate = nextMonth(this.leftDate);
-        this.handleConfirm(false);
+        this.$emit('pick', null);
       },
 
       handleChangeRange(val) {
diff --git a/packages/date-picker/src/panel/date.vue b/packages/date-picker/src/panel/date.vue
index 820a294c8..ec518d36a 100644
--- a/packages/date-picker/src/panel/date.vue
+++ b/packages/date-picker/src/panel/date.vue
@@ -214,7 +214,7 @@
 
       handleClear() {
         this.date = this.defaultValue ? new Date(this.defaultValue) : new Date();
-        this.$emit('pick');
+        this.$emit('pick', null);
       },
 
       emit(value, ...args) {
diff --git a/packages/date-picker/src/panel/time-range.vue b/packages/date-picker/src/panel/time-range.vue
index 3bc5f9ce1..9a25fee21 100644
--- a/packages/date-picker/src/panel/time-range.vue
+++ b/packages/date-picker/src/panel/time-range.vue
@@ -150,7 +150,7 @@
 
     methods: {
       handleClear() {
-        this.$emit('pick', []);
+        this.$emit('pick', null);
       },
 
       handleCancel() {
diff --git a/packages/date-picker/src/panel/time-select.vue b/packages/date-picker/src/panel/time-select.vue
index 1fcdabd55..230cfaf27 100644
--- a/packages/date-picker/src/panel/time-select.vue
+++ b/packages/date-picker/src/panel/time-select.vue
@@ -90,7 +90,7 @@
       },
 
       handleClear() {
-        this.$emit('pick');
+        this.$emit('pick', null);
       },
 
       scrollToOption(selector = '.selected') {
diff --git a/test/unit/specs/date-picker.spec.js b/test/unit/specs/date-picker.spec.js
index cd738a8a0..c40e08809 100644
--- a/test/unit/specs/date-picker.spec.js
+++ b/test/unit/specs/date-picker.spec.js
@@ -101,13 +101,14 @@ describe('DatePicker', () => {
     setTimeout(_ => {
       const $el = vm.$refs.compo.picker.$el;
       $el.querySelector('td.available').click();
-      vm.$nextTick(_ => {
-        vm.$el.querySelector('.el-input__icon').click();
+      setTimeout(_ => {
+        vm.$refs.compo.showClose = true;
+        vm.$refs.compo.handleClickIcon({ stopPropagation: () => null });
         setTimeout(_ => {
-          expect(vm.value).to.empty;
+          expect(vm.value).to.equal(null);
           done();
         }, DELAY);
-      });
+      }, DELAY);
     }, DELAY);
   });
 
@@ -1175,6 +1176,28 @@ describe('DatePicker', () => {
         done();
       }, DELAY);
     });
+
+    it('clear value', done => {
+      vm = createVue({
+        template: '<el-date-picker type="daterange" v-model="value" ref="compo" />',
+        data() {
+          return {
+            value: [new Date(2000, 9, 1), new Date(2000, 9, 2)]
+          };
+        }
+      }, true);
+
+      vm.$el.querySelector('input').focus();
+
+      setTimeout(_ => {
+        vm.$refs.compo.showClose = true;
+        vm.$refs.compo.handleClickIcon({ stopPropagation: () => null });
+        setTimeout(_ => {
+          expect(vm.value).to.equal(null);
+          done();
+        }, DELAY);
+      }, DELAY);
+    });
   });
 
   describe('type:datetimerange', () => {