diff --git a/src/components/date-picker/panel/date-range.vue b/src/components/date-picker/panel/date-range.vue
index eed084e7..1a8605cb 100644
--- a/src/components/date-picker/panel/date-range.vue
+++ b/src/components/date-picker/panel/date-range.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="classes">
+    <div :class="classes" @mousedown.prevent>
         <div :class="[prefixCls + '-sidebar']" v-if="shortcuts.length">
             <div
                 :class="[prefixCls + '-shortcut']"
diff --git a/src/components/date-picker/panel/date.vue b/src/components/date-picker/panel/date.vue
index 3d6ac926..617e60bb 100644
--- a/src/components/date-picker/panel/date.vue
+++ b/src/components/date-picker/panel/date.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="classes">
+    <div :class="classes" @mousedown.prevent>
         <div :class="[prefixCls + '-sidebar']" v-if="shortcuts.length">
             <div
                 :class="[prefixCls + '-shortcut']"
diff --git a/src/components/date-picker/panel/time-range.vue b/src/components/date-picker/panel/time-range.vue
index 4a18c3bd..d5c91102 100644
--- a/src/components/date-picker/panel/time-range.vue
+++ b/src/components/date-picker/panel/time-range.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="classes">
+    <div :class="classes" @mousedown.prevent>
         <div :class="[prefixCls + '-body']">
             <div :class="[prefixCls + '-content', prefixCls + '-content-left']">
                 <div :class="[timePrefixCls + '-header']">
@@ -205,4 +205,4 @@
             if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true;
         }
     };
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/date-picker/panel/time.vue b/src/components/date-picker/panel/time.vue
index 4cd63979..e6646b5f 100644
--- a/src/components/date-picker/panel/time.vue
+++ b/src/components/date-picker/panel/time.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="[prefixCls + '-body-wrapper']">
+    <div :class="[prefixCls + '-body-wrapper']" @mousedown.prevent>
         <div :class="[prefixCls + '-body']">
             <div :class="[timePrefixCls + '-header']" v-if="showDate">{{ visibleDate }}</div>
             <div :class="[prefixCls + '-content']">
diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue
index bcdb03ad..dc1fc70c 100644
--- a/src/components/date-picker/picker.vue
+++ b/src/components/date-picker/picker.vue
@@ -12,6 +12,7 @@
                     :name="name"
                     @on-input-change="handleInputChange"
                     @on-focus="handleFocus"
+                    @on-blur="handleBlur"
                     @on-click="handleIconClick"
                     @mouseenter.native="handleInputMouseenter"
                     @mouseleave.native="handleInputMouseleave"
@@ -290,6 +291,9 @@
                 if (this.readonly) return;
                 this.visible = true;
             },
+            handleBlur () {
+                this.visible = false;
+            },
             handleInputChange (event) {
                 const oldValue = this.visualValue;
                 const value = event.target.value;
@@ -478,6 +482,9 @@
                     if (this.picker) this.picker.resetView && this.picker.resetView(true);
                     this.$refs.drop.destroy();
                     if (this.open === null) this.$emit('on-open-change', false);
+                    // blur the input
+                    const input = this.$el.querySelector('input');
+                    if (input) input.blur();
                 }
             },
             internalValue(val) {