refactor (calendarHeaderComponent): make a demo for custom header

Author: Tobias Schweizer

src/demo-app/datepicker/datepicker-demo.html

@@ -11,7 +11,7 @@ <h2>Options</h2>
     <input matInput [matDatepicker]="minDatePicker" [(ngModel)]="minDate" placeholder="Min date"
         [disabled]="inputDisabled">
     <mat-datepicker-toggle matSuffix [for]="minDatePicker"></mat-datepicker-toggle>
-    <mat-datepicker #minDatePicker [touchUi]="touch" [disabled]="datepickerDisabled" [calendarHeaderComponent]="customHeader"></mat-datepicker>
+    <mat-datepicker #minDatePicker [touchUi]="touch" [disabled]="datepickerDisabled"></mat-datepicker>
   </mat-form-field>
   <mat-form-field>
     <input matInput [matDatepicker]="maxDatePicker" [(ngModel)]="maxDate" placeholder="Max date"
@@ -28,6 +28,14 @@ <h2>Options</h2>
     <mat-datepicker #startAtPicker [touchUi]="touch" [disabled]="datepickerDisabled"></mat-datepicker>
   </mat-form-field>
 </p>
+<p>
+  <mat-form-field>
+    <input matInput [matDatepicker]="customCalendarHeaderPicker" placeholder="Custom calendar header"
+           [disabled]="inputDisabled">
+    <mat-datepicker-toggle matSuffix [for]="customCalendarHeaderPicker"></mat-datepicker-toggle>
+    <mat-datepicker #customCalendarHeaderPicker [touchUi]="touch" [disabled]="datepickerDisabled" [calendarHeaderComponent]="customHeader"></mat-datepicker>
+  </mat-form-field>
+</p>
 
 <h2>Result</h2>
 

src/demo-app/datepicker/datepicker-demo.ts

@@ -45,21 +45,13 @@ export class DatepickerDemo {
   customHeader = CustomHeader;
 }
 
-// Custom Header Component for DatePicker Calendar
+// Custom header component for datepicker
 @Component({
   selector: 'custom-header',
-  template: `<select (change)="convertCalendarFormatTo($event.target.value)">
-      <option>Gregorian</option>
-      <option>Julian</option>
-  </select>`
+  template: 'custom header'
 })
 export class CustomHeader {
   constructor(@Host() public calendar: MatCalendar<any>,
               public adapter: DateAdapter<any>) {
   }
-
-  convertCalendarFormatTo(format: string) {
-
-    console.log(format);
-  }
 }