fix(datepicker): calendar toggle submitting parent form (#4531)

Prevents the toggle for the datepicker's calendar from submitting its parent form.

Fixes #4530.

Author: crisbeto

src/lib/datepicker/datepicker-toggle.ts

@@ -9,6 +9,7 @@ import {MdDatepickerIntl} from './datepicker-intl';
   template: '',
   styleUrls: ['datepicker-toggle.css'],
   host: {
+    '[attr.type]': 'type',
     '[class.mat-datepicker-toggle]': 'true',
     '[attr.aria-label]': '_intl.openCalendarLabel',
     '(click)': '_open($event)',
@@ -17,8 +18,12 @@ import {MdDatepickerIntl} from './datepicker-intl';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MdDatepickerToggle<D> {
+  /** Datepicker instance that the button will toggle. */
   @Input('mdDatepickerToggle') datepicker: MdDatepicker<D>;
 
+  /** Type of the button. */
+  @Input() type: string = 'button';
+
   @Input('matDatepickerToggle')
   get _datepicker() { return this.datepicker; }
   set _datepicker(v: MdDatepicker<D>) { this.datepicker = v; }

src/lib/datepicker/datepicker.spec.ts

@@ -374,15 +374,20 @@ describe('MdDatepicker', () => {
         fixture.detectChanges();
       }));
 
-      it('should open calendar when toggle clicked', async(() => {
+      it('should open calendar when toggle clicked', () => {
         expect(document.querySelector('md-dialog-container')).toBeNull();
 
         let toggle = fixture.debugElement.query(By.css('button'));
         dispatchMouseEvent(toggle.nativeElement, 'click');
         fixture.detectChanges();
 
         expect(document.querySelector('md-dialog-container')).not.toBeNull();
-      }));
+      });
+
+      it('should set the `button` type on the trigger to prevent form submissions', () => {
+        let toggle = fixture.debugElement.query(By.css('button')).nativeElement;
+        expect(toggle.getAttribute('type')).toBe('button');
+      });
     });
 
     describe('datepicker inside input-container', () => {