diff --git a/src/index.vue b/src/index.vue
index 88911863..a035c0b9 100644
--- a/src/index.vue
+++ b/src/index.vue
@@ -472,6 +472,10 @@ export default {
       if (this.editable && this.userInput !== null) {
         const calendar = this.$children[0]
         const checkDate = calendar.isDisabledTime
+        if (!value) {
+          this.clearDate()
+          return
+        }
         if (this.range) {
           const range = value.split(` ${this.rangeSeparator} `)
           if (range.length === 2) {
diff --git a/test/index.spec.js b/test/index.spec.js
index db46fdee..ddad8fce 100644
--- a/test/index.spec.js
+++ b/test/index.spec.js
@@ -235,6 +235,25 @@ describe('datepicker', () => {
     expect(shortcuts.exists()).toBe(false)
   })
 
+  it('clear the value will set the value null', (done) => {
+    wrapper = mount(DatePicker, {
+      propsData: {
+        format: 'YYYY-MM-DD',
+        value: '2018-09-10'
+      },
+      sync: false
+    })
+    const input = wrapper.find('input')
+    input.setValue('')
+    input.trigger('input')
+    input.trigger('change')
+    Vue.nextTick(() => {
+      const emitted = wrapper.emitted()
+      expect(emitted.input).toEqual([[null]])
+      done()
+    })
+  })
+
   it('type input should be right', (done) => {
     wrapper = mount(DatePicker, {
       propsData: {