diff --git a/CHANGELOG.md b/CHANGELOG.md
index cb784c014..2495a35b4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@
 - 修复 Menu 组件 default-active 绑定动态值无法更新的问题
 - 新增特性 Menu 组件中若选中子菜单项现在会自动展开所有父级菜单
 - 修复 vue-popper 引入 popper 路径错误
+- 修复 DatePicker 初始值是合法时间类型但无法设置成功的问题
 
 #### 非兼容性更新
 - Menu 组件的 `unique-opend` 属性修正为 `unique-opened`
diff --git a/examples/docs/date-picker.md b/examples/docs/date-picker.md
index 9f29bbb60..31fec90a1 100644
--- a/examples/docs/date-picker.md
+++ b/examples/docs/date-picker.md
@@ -51,7 +51,7 @@
             }
           }]
         },
-        value1: '',
+        value1: '2016-08-10',
         value2: '',
         value3: '',
         value4: '',
diff --git a/examples/docs/time-picker.md b/examples/docs/time-picker.md
index 65776544d..94eec0cc7 100644
--- a/examples/docs/time-picker.md
+++ b/examples/docs/time-picker.md
@@ -34,13 +34,25 @@
 
 :::demo 使用 el-time-picker 标签，通过`selectableRange`限制可选时间范围
 ```html
-<el-time-picker
-  v-model="value2"
-  :picker-options="{
-    selectableRange: '18:30:00 - 20:30:00'
-  }"
-  placeholder="任意时间点">
-</el-time-picker>
+<template>
+  <el-time-picker
+    v-model="value2"
+    :picker-options="{
+      selectableRange: '18:30:00 - 20:30:00'
+    }"
+    placeholder="任意时间点">
+  </el-time-picker>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value2: new Date(2016, 9, 10, 18, 40)
+      };
+    }
+  }
+</script>
 ```
 :::
 
@@ -50,25 +62,38 @@
 
 :::demo
 ```html
-<el-time-select
-  placeholder="起始时间"
-  v-model="startTime"
-  :picker-options="{
-    start: '08:30',
-    step: '00:15',
-    end: '18:30'
-  }">
-</el-time-select>
-<el-time-select
-  placeholder="结束时间"
-  v-model="endTime"
-  :picker-options="{
-    start: '08:30',
-    step: '00:15',
-    end: '18:30',
-    minTime: startTime
-  }">
-</el-time-select>
+<template>
+  <el-time-select
+    placeholder="起始时间"
+    v-model="startTime"
+    :picker-options="{
+      start: '08:30',
+      step: '00:15',
+      end: '18:30'
+    }">
+  </el-time-select>
+  <el-time-select
+    placeholder="结束时间"
+    v-model="endTime"
+    :picker-options="{
+      start: '08:30',
+      step: '00:15',
+      end: '18:30',
+      minTime: startTime
+    }">
+  </el-time-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        startTime: '',
+        endTime: ''
+      };
+    }
+  }
+</script>
 ```
 :::
 
@@ -78,11 +103,23 @@
 
 :::demo 添加`is-range`属性即可选择时间范围
 ```html
-<el-time-picker
-  is-range
-  v-model="value3"
-  placeholder="选择时间范围">
-</el-time-picker>
+<template>
+  <el-time-picker
+    is-range
+    v-model="value3"
+    placeholder="选择时间范围">
+  </el-time-picker>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
+      };
+    }
+  }
+</script>
 ```
 :::
 
diff --git a/packages/date-picker/src/util/index.js b/packages/date-picker/src/util/index.js
index 07936cfb2..be1eed1e6 100644
--- a/packages/date-picker/src/util/index.js
+++ b/packages/date-picker/src/util/index.js
@@ -25,7 +25,8 @@ export const merge = function(target) {
 };
 
 export const formatDate = function(date, format) {
-  if (!(date instanceof Date)) return '';
+  date = new Date(date);
+  if (isNaN(date.getTime())) return '';
   return dateUtil.format(date, format || 'yyyy-MM-dd');
 };