diff --git a/src/lib/datepicker/calendar-header.html b/src/lib/datepicker/calendar-header.html
index c11663b6227e..c04edbe49329 100644
--- a/src/lib/datepicker/calendar-header.html
+++ b/src/lib/datepicker/calendar-header.html
@@ -1,6 +1,6 @@
 <div class="mat-calendar-header">
   <div class="mat-calendar-controls">
-    <button mat-button class="mat-calendar-period-button"
+    <button mat-button type="button" class="mat-calendar-period-button"
             (click)="currentPeriodClicked()" [attr.aria-label]="periodButtonLabel">
       {{periodButtonText}}
       <div class="mat-calendar-arrow" [class.mat-calendar-invert]="calendar.currentView != 'month'"></div>
@@ -8,12 +8,12 @@
 
     <div class="mat-calendar-spacer"></div>
 
-    <button mat-icon-button class="mat-calendar-previous-button"
+    <button mat-icon-button type="button" class="mat-calendar-previous-button"
             [disabled]="!previousEnabled()" (click)="previousClicked()"
             [attr.aria-label]="prevButtonLabel">
     </button>
 
-    <button mat-icon-button class="mat-calendar-next-button"
+    <button mat-icon-button type="button" class="mat-calendar-next-button"
             [disabled]="!nextEnabled()" (click)="nextClicked()"
             [attr.aria-label]="nextButtonLabel">
     </button>
diff --git a/src/lib/datepicker/calendar.spec.ts b/src/lib/datepicker/calendar.spec.ts
index bdcd25b50477..fb4b322666f7 100644
--- a/src/lib/datepicker/calendar.spec.ts
+++ b/src/lib/datepicker/calendar.spec.ts
@@ -113,9 +113,12 @@ describe('MatCalendar', () => {
         fixture.detectChanges();
 
         expect(button.getAttribute('aria-label')).toBe('Go to multi-year view?');
-      })
-    );
+      }));
 
+    it('should set all buttons to be `type="button"`', () => {
+      const invalidButtons = calendarElement.querySelectorAll('button:not([type="button"])');
+      expect(invalidButtons.length).toBe(0);
+    });
 
     describe('a11y', () => {
       describe('calendar body', () => {