diff --git a/__test__/__snapshots__/calendar-panel.test.js.snap b/__test__/__snapshots__/calendar-panel.test.js.snap
index 97832fd..2e7b653 100644
--- a/__test__/__snapshots__/calendar-panel.test.js.snap
+++ b/__test__/__snapshots__/calendar-panel.test.js.snap
@@ -9,6 +9,7 @@ exports[`CalendarPanel prop: type=date 1`] = `
   >
     <button
       class="mx-btn mx-btn-text mx-btn-icon-double-left"
+      type="button"
     >
       <i
         class="mx-icon-double-left"
@@ -17,6 +18,7 @@ exports[`CalendarPanel prop: type=date 1`] = `
      
     <button
       class="mx-btn mx-btn-text mx-btn-icon-left"
+      type="button"
     >
       <i
         class="mx-icon-left"
@@ -25,6 +27,7 @@ exports[`CalendarPanel prop: type=date 1`] = `
      
     <button
       class="mx-btn mx-btn-text mx-btn-icon-double-right"
+      type="button"
     >
       <i
         class="mx-icon-double-right"
@@ -33,6 +36,7 @@ exports[`CalendarPanel prop: type=date 1`] = `
      
     <button
       class="mx-btn mx-btn-text mx-btn-icon-right"
+      type="button"
     >
       <i
         class="mx-icon-right"
@@ -44,6 +48,7 @@ exports[`CalendarPanel prop: type=date 1`] = `
     >
       <button
         class="mx-btn mx-btn-text mx-btn-current-month"
+        type="button"
       >
         
           Oct
@@ -51,6 +56,7 @@ exports[`CalendarPanel prop: type=date 1`] = `
       </button>
       <button
         class="mx-btn mx-btn-text mx-btn-current-year"
+        type="button"
       >
         
           2019
@@ -93,6 +99,7 @@ exports[`CalendarPanel prop: type=month 1`] = `
   >
     <button
       class="mx-btn mx-btn-text mx-btn-icon-double-left"
+      type="button"
     >
       <i
         class="mx-icon-double-left"
@@ -102,6 +109,7 @@ exports[`CalendarPanel prop: type=month 1`] = `
     <button
       class="mx-btn mx-btn-text mx-btn-icon-left"
       style="display: none;"
+      type="button"
     >
       <i
         class="mx-icon-left"
@@ -110,6 +118,7 @@ exports[`CalendarPanel prop: type=month 1`] = `
      
     <button
       class="mx-btn mx-btn-text mx-btn-icon-double-right"
+      type="button"
     >
       <i
         class="mx-icon-double-right"
@@ -119,6 +128,7 @@ exports[`CalendarPanel prop: type=month 1`] = `
     <button
       class="mx-btn mx-btn-text mx-btn-icon-right"
       style="display: none;"
+      type="button"
     >
       <i
         class="mx-icon-right"
@@ -130,6 +140,7 @@ exports[`CalendarPanel prop: type=month 1`] = `
     >
       <button
         class="mx-btn mx-btn-text"
+        type="button"
       >
         
         2019
@@ -165,6 +176,7 @@ exports[`CalendarPanel prop: type=year 1`] = `
   >
     <button
       class="mx-btn mx-btn-text mx-btn-icon-double-left"
+      type="button"
     >
       <i
         class="mx-icon-double-left"
@@ -174,6 +186,7 @@ exports[`CalendarPanel prop: type=year 1`] = `
     <button
       class="mx-btn mx-btn-text mx-btn-icon-left"
       style="display: none;"
+      type="button"
     >
       <i
         class="mx-icon-left"
@@ -182,6 +195,7 @@ exports[`CalendarPanel prop: type=year 1`] = `
      
     <button
       class="mx-btn mx-btn-text mx-btn-icon-double-right"
+      type="button"
     >
       <i
         class="mx-icon-double-right"
@@ -191,6 +205,7 @@ exports[`CalendarPanel prop: type=year 1`] = `
     <button
       class="mx-btn mx-btn-text mx-btn-icon-right"
       style="display: none;"
+      type="button"
     >
       <i
         class="mx-icon-right"
diff --git a/__test__/date-picker.test.js b/__test__/date-picker.test.js
index 953b127..166a51b 100644
--- a/__test__/date-picker.test.js
+++ b/__test__/date-picker.test.js
@@ -325,4 +325,18 @@ describe('DatePicker', () => {
     el.trigger('click');
     expect(wrapper.emitted().close).toBeTruthy();
   });
+
+  // present the button submit form
+  it('the type of all buttons should be button', () => {
+    wrapper = mount(DatePicker, {
+      propsData: {
+        open: true,
+        showTimePanel: true,
+      },
+    });
+    const els = wrapper.findAll('button');
+    els.wrappers.forEach(v => {
+      expect(v.element.type).toBe('button');
+    });
+  });
 });
diff --git a/src/calendar/calendar-panel.vue b/src/calendar/calendar-panel.vue
index 9563640..565d7eb 100644
--- a/src/calendar/calendar-panel.vue
+++ b/src/calendar/calendar-panel.vue
@@ -9,6 +9,7 @@
     <div class="mx-calendar-header">
       <button
         v-show="showIconDoubleArrow"
+        type="button"
         class="mx-btn mx-btn-text mx-btn-icon-double-left"
         @click="handleIconDoubleLeftClick"
       >
@@ -16,6 +17,7 @@
       </button>
       <button
         v-show="showIconArrow"
+        type="button"
         class="mx-btn mx-btn-text mx-btn-icon-left"
         @click="handleIconLeftClick"
       >
@@ -23,6 +25,7 @@
       </button>
       <button
         v-show="showIconDoubleArrow"
+        type="button"
         class="mx-btn mx-btn-text mx-btn-icon-double-right"
         @click="handleIconDoubleRightClick"
       >
@@ -30,6 +33,7 @@
       </button>
       <button
         v-show="showIconArrow"
+        type="button"
         class="mx-btn mx-btn-text mx-btn-icon-right"
         @click="handleIconRightClick"
       >
@@ -43,6 +47,7 @@
         </template>
         <button
           v-else-if="panel === 'month'"
+          type="button"
           class="mx-btn mx-btn-text"
           @click="handelPanelChange('year')"
         >
@@ -52,6 +57,7 @@
           <button
             v-for="item in dateHeader"
             :key="item.panel"
+            type="button"
             :class="`mx-btn mx-btn-text mx-btn-current-${item.panel}`"
             @click="handelPanelChange(item.panel)"
           >
diff --git a/src/time/time-panel.vue b/src/time/time-panel.vue
index 2eaef1c..79e8612 100644
--- a/src/time/time-panel.vue
+++ b/src/time/time-panel.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="mx-time">
     <div v-if="showTimeHeader" class="mx-time-header">
-      <button class="mx-btn mx-btn-text mx-time-header-title" @click="handleClickTitle">
+      <button
+        type="button"
+        class="mx-btn mx-btn-text mx-time-header-title"
+        @click="handleClickTitle"
+      >
         {{ title }}
       </button>
     </div>