feat(datepicker): Add Custom Header to DatePicker

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

@@ -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

@@ -6,9 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Host} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {MatDatepickerInputEvent} from '@angular/material/datepicker';
+import {DateAdapter} from '@angular/material/core';
+import {MatCalendar} from '@angular/material';
 
 
 @Component({
@@ -32,10 +34,24 @@ export class DatepickerDemo {
   lastDateChange: Date | null;
 
   dateFilter =
-      (date: Date) => !(date.getFullYear() % 2) && (date.getMonth() % 2) && !(date.getDate() % 2)
+    (date: Date) => !(date.getFullYear() % 2) && (date.getMonth() % 2) && !(date.getDate() % 2)
 
   onDateInput = (e: MatDatepickerInputEvent<Date>) => this.lastDateInput = e.value;
   onDateChange = (e: MatDatepickerInputEvent<Date>) => this.lastDateChange = e.value;
 
   dateCtrl = new FormControl();
+
+  // pass custom header component type as input
+  customHeader = CustomHeader;
+}
+
+// Custom header component for datepicker
+@Component({
+  selector: 'custom-header',
+  template: 'custom header'
+})
+export class CustomHeader {
+  constructor(@Host() public calendar: MatCalendar<any>,
+              public adapter: DateAdapter<any>) {
+  }
 }

src/demo-app/demo-app/demo-module.ts

@@ -18,7 +18,7 @@ import {ButtonDemo} from '../button/button-demo';
 import {CardDemo} from '../card/card-demo';
 import {CheckboxDemo, MatCheckboxDemoNestedChecklist} from '../checkbox/checkbox-demo';
 import {ChipsDemo} from '../chips/chips-demo';
-import {DatepickerDemo} from '../datepicker/datepicker-demo';
+import {CustomHeader, DatepickerDemo} from '../datepicker/datepicker-demo';
 import {DemoMaterialModule} from '../demo-material-module';
 import {ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog} from '../dialog/dialog-demo';
 import {DrawerDemo} from '../drawer/drawer-demo';
@@ -79,6 +79,7 @@ import {TableDemoModule} from '../table/table-demo-module';
     ChipsDemo,
     ContentElementDialog,
     DatepickerDemo,
+    CustomHeader,
     DemoApp,
     DialogDemo,
     DrawerDemo,
@@ -133,6 +134,7 @@ import {TableDemoModule} from '../table/table-demo-module';
     RotiniPanel,
     ScienceJoke,
     SpagettiPanel,
+    CustomHeader,
   ],
 })
 export class DemoModule {}

src/lib/datepicker/calendar.html

@@ -1,4 +1,7 @@
 <div class="mat-calendar-header">
+
+  <ng-template [cdkPortalOutlet]="calendarHeaderPortal"></ng-template>
+
   <div class="mat-calendar-controls">
     <button mat-button class="mat-calendar-period-button"
             (click)="_currentPeriodClicked()"  [attr.aria-label]="_periodButtonLabel">

src/lib/datepicker/calendar.ts

@@ -44,7 +44,20 @@ import {MatMonthView} from './month-view';
 import {MatMultiYearView, yearsPerPage, yearsPerRow} from './multi-year-view';
 import {MatYearView} from './year-view';
 import {Directionality} from '@angular/cdk/bidi';
+import {ComponentPortal, ComponentType, Portal} from '@angular/cdk/portal';
 
+/**
+ * Default header of a [MatCalendar].
+ */
+@Component({
+    selector: 'mat-calendar-header',
+    template: 'default header'
+})
+export class MatCalendarHeader {
+    constructor() {
+
+    }
+}
 
 /**
  * A calendar that is used as part of the datepicker.
@@ -64,6 +77,17 @@ import {Directionality} from '@angular/cdk/bidi';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatCalendar<D> implements AfterContentInit, OnDestroy, OnChanges {
+
+  /** An input indicating the type of the header component, if set. */
+  @Input() headerComponent: ComponentType<any>;
+
+  /** A portal containing the header component type for this calendar. */
+  private _calendarHeaderPortal: Portal<any>;
+
+  get calendarHeaderPortal() {
+    return this._calendarHeaderPortal;
+  }
+
   private _intlChanges: Subscription;
 
   /** A date representing the period (month or year) to start the calendar in. */
@@ -125,7 +149,7 @@ export class MatCalendar<D> implements AfterContentInit, OnDestroy, OnChanges {
         (!this.dateFilter || this.dateFilter(date)) &&
         (!this.minDate || this._dateAdapter.compareDate(date, this.minDate) >= 0) &&
         (!this.maxDate || this._dateAdapter.compareDate(date, this.maxDate) <= 0);
-  }
+  };
 
   /**
    * The current active date. This determines which time period is shown and which date is
@@ -200,6 +224,9 @@ export class MatCalendar<D> implements AfterContentInit, OnDestroy, OnChanges {
   }
 
   ngAfterContentInit() {
+
+    this._calendarHeaderPortal = new ComponentPortal(this.headerComponent || MatCalendarHeader);
+
     this._activeDate = this.startAt || this._dateAdapter.today();
     this._focusActiveCell();
     this._currentView = this.startView;

src/lib/datepicker/datepicker-content.html

@@ -8,5 +8,6 @@
     [dateFilter]="datepicker._dateFilter"
     [selected]="datepicker._selected"
     (selectedChange)="datepicker._select($event)"
-    (_userSelection)="datepicker.close()">
+    (_userSelection)="datepicker.close()"
+    [headerComponent]="datepicker.calendarHeaderComponent">
 </mat-calendar>

src/lib/datepicker/datepicker-module.ts

@@ -13,7 +13,7 @@ import {NgModule} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatDialogModule} from '@angular/material/dialog';
 import {MatIconModule} from '@angular/material/icon';
-import {MatCalendar} from './calendar';
+import {MatCalendarHeader, MatCalendar} from './calendar';
 import {MatCalendarBody} from './calendar-body';
 import {
   MAT_DATEPICKER_SCROLL_STRATEGY_PROVIDER,
@@ -26,6 +26,7 @@ import {MatDatepickerToggle, MatDatepickerToggleIcon} from './datepicker-toggle'
 import {MatMonthView} from './month-view';
 import {MatMultiYearView} from './multi-year-view';
 import {MatYearView} from './year-view';
+import {PortalModule} from '@angular/cdk/portal';
 
 
 @NgModule({
@@ -36,6 +37,7 @@ import {MatYearView} from './year-view';
     MatIconModule,
     OverlayModule,
     A11yModule,
+    PortalModule,
   ],
   exports: [
     MatCalendar,
@@ -60,13 +62,15 @@ import {MatYearView} from './year-view';
     MatMonthView,
     MatYearView,
     MatMultiYearView,
+    MatCalendarHeader
   ],
   providers: [
     MatDatepickerIntl,
     MAT_DATEPICKER_SCROLL_STRATEGY_PROVIDER,
   ],
   entryComponents: [
     MatDatepickerContent,
+    MatCalendarHeader,
   ]
 })
 export class MatDatepickerModule {}

src/lib/datepicker/datepicker.ts

@@ -17,7 +17,7 @@ import {
   RepositionScrollStrategy,
   ScrollStrategy,
 } from '@angular/cdk/overlay';
-import {ComponentPortal} from '@angular/cdk/portal';
+import {ComponentPortal, ComponentType} from '@angular/cdk/portal';
 import {take} from 'rxjs/operators/take';
 import {filter} from 'rxjs/operators/filter';
 import {
@@ -115,6 +115,10 @@ export class MatDatepickerContent<D> implements AfterContentInit {
   preserveWhitespaces: false,
 })
 export class MatDatepicker<D> implements OnDestroy {
+
+  /** An input indicating the type of the custom header component for the calendar, if set. */
+  @Input() calendarHeaderComponent: ComponentType<any>;
+
   /** The date to open the calendar to initially. */
   @Input()
   get startAt(): D | null {