diff --git a/packages/date-picker/src/panel/date-range.vue b/packages/date-picker/src/panel/date-range.vue
index 22993e83e..fe652eebc 100644
--- a/packages/date-picker/src/panel/date-range.vue
+++ b/packages/date-picker/src/panel/date-range.vue
@@ -193,6 +193,7 @@
   import TimePicker from './time';
   import DateTable from '../basic/date-table';
   import ElInput from 'element-ui/packages/input';
+  import ElButton from 'element-ui/packages/button';
 
   const advanceDate = (date, amount) => {
     return new Date(new Date(date).getTime() + amount);
@@ -586,6 +587,6 @@
       }
     },
 
-    components: { TimePicker, DateTable, ElInput }
+    components: { TimePicker, DateTable, ElInput, ElButton }
   };
 </script>
diff --git a/packages/date-picker/src/panel/date.vue b/packages/date-picker/src/panel/date.vue
index af707dc47..820a294c8 100644
--- a/packages/date-picker/src/panel/date.vue
+++ b/packages/date-picker/src/panel/date.vue
@@ -148,6 +148,7 @@
   } from '../util';
   import Locale from 'element-ui/src/mixins/locale';
   import ElInput from 'element-ui/packages/input';
+  import ElButton from 'element-ui/packages/button';
   import TimePicker from './time';
   import YearTable from '../basic/year-table';
   import MonthTable from '../basic/month-table';
@@ -431,7 +432,7 @@
     },
 
     components: {
-      TimePicker, YearTable, MonthTable, DateTable, ElInput
+      TimePicker, YearTable, MonthTable, DateTable, ElInput, ElButton
     },
 
     data() {