feat(datepicker): Add Custom Header to DatePicker

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

@@ -0,0 +1,7 @@
+<div class="custom-header">
+  <button mat-icon-button (click)="previousClicked('year')">&lt;&lt;</button>
+  <button mat-icon-button (click)="previousClicked('month')">&lt;</button>
+  <span class="custom-header-label">{{periodLabel}}</span>
+  <button mat-icon-button (click)="nextClicked('month')">&gt;</button>
+  <button mat-icon-button (click)="nextClicked('year')">&gt;&gt;</button>
+</div>

src/demo-app/datepicker/custom-header.scss

@@ -0,0 +1,10 @@
+.custom-header {
+  padding: 1em 1.5em;
+  display: flex;
+  align-items: center;
+}
+
+.custom-header-label {
+  flex: 1;
+  text-align: center;
+}

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

@@ -144,3 +144,14 @@ <h2>Datepicker with value property binding</h2>
                     [startView]="yearView ? 'year' : 'month'"></mat-datepicker>
   </mat-form-field>
 </p>
+
+<h2>Datepicker with custom header</h2>
+<p>
+  <mat-form-field>
+    <mat-label>Custom calendar header</mat-label>
+    <input matInput [matDatepicker]="customCalendarHeaderPicker"
+           [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>

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

@@ -6,12 +6,13 @@
  * 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';
 import {ThemePalette} from '@angular/material/core';
 
-
 @Component({
   moduleId: module.id,
   selector: 'datepicker-demo',
@@ -40,4 +41,38 @@ export class DatepickerDemo {
 
   onDateInput = (e: MatDatepickerInputEvent<Date>) => this.lastDateInput = e.value;
   onDateChange = (e: MatDatepickerInputEvent<Date>) => this.lastDateChange = e.value;
+
+  // pass custom header component type as input
+  customHeader = CustomHeader;
+}
+
+// Custom header component for datepicker
+@Component({
+  moduleId: module.id,
+  selector: 'custom-header',
+  templateUrl: 'custom-header.html',
+  styleUrls: ['custom-header.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CustomHeader<D> {
+  constructor(@Host() private _calendar: MatCalendar<D>,
+              private _dateAdapter: DateAdapter<D>) {}
+
+  get periodLabel() {
+    const year = this._dateAdapter.getYearName(this._calendar.activeDate);
+    const month = (this._dateAdapter.getMonth(this._calendar.activeDate) + 1);
+    return `${month}/${year}`;
+  }
+
+  previousClicked(mode: 'month' | 'year') {
+    this._calendar.activeDate = mode == 'month' ?
+        this._dateAdapter.addCalendarMonths(this._calendar.activeDate, -1) :
+            this._dateAdapter.addCalendarYears(this._calendar.activeDate, -1);
+  }
+
+  nextClicked(mode: 'month' | 'year') {
+    this._calendar.activeDate = mode == 'month' ?
+        this._dateAdapter.addCalendarMonths(this._calendar.activeDate, 1) :
+            this._dateAdapter.addCalendarYears(this._calendar.activeDate, 1);
+  }
 }

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

@@ -19,7 +19,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';
@@ -88,6 +88,7 @@ import {ConnectedOverlayDemo, DemoOverlay} from '../connected-overlay/connected-
     ChipsDemo,
     ContentElementDialog,
     DatepickerDemo,
+    CustomHeader,
     DemoApp,
     DialogDemo,
     DrawerDemo,
@@ -148,6 +149,7 @@ import {ConnectedOverlayDemo, DemoOverlay} from '../connected-overlay/connected-
     ScienceJoke,
     SpagettiPanel,
     ExampleBottomSheet,
+    CustomHeader,
     DemoOverlay,
   ],
 })

src/lib/datepicker/calendar-header.html

@@ -0,0 +1,21 @@
+<div class="mat-calendar-header">
+  <div class="mat-calendar-controls">
+    <button mat-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>
+    </button>
+
+    <div class="mat-calendar-spacer"></div>
+
+    <button mat-icon-button class="mat-calendar-previous-button"
+            [disabled]="!previousEnabled()" (click)="previousClicked()"
+            [attr.aria-label]="prevButtonLabel">
+    </button>
+
+    <button mat-icon-button class="mat-calendar-next-button"
+            [disabled]="!nextEnabled()" (click)="nextClicked()"
+            [attr.aria-label]="nextButtonLabel">
+    </button>
+  </div>
+</div>

src/lib/datepicker/calendar-header.spec.ts

@@ -0,0 +1,170 @@
+import {Direction, Directionality} from '@angular/cdk/bidi';
+import {MatDatepickerModule} from './datepicker-module';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatDatepickerIntl} from './datepicker-intl';
+import {DEC, FEB, JAN, MatNativeDateModule} from '@angular/material/core';
+import {Component} from '@angular/core';
+import {MatCalendar} from './calendar';
+import {By} from '@angular/platform-browser';
+import {yearsPerPage} from './multi-year-view';
+
+describe('MatCalendarHeader', () => {
+  let dir: { value: Direction };
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        MatNativeDateModule,
+        MatDatepickerModule,
+      ],
+      declarations: [
+        // Test components.
+        StandardCalendar,
+      ],
+      providers: [
+        MatDatepickerIntl,
+        {provide: Directionality, useFactory: () => dir = {value: 'ltr'}}
+      ],
+    });
+
+    TestBed.compileComponents();
+  }));
+
+  describe('standard calendar', () => {
+    let fixture: ComponentFixture<StandardCalendar>;
+    let testComponent: StandardCalendar;
+    let calendarElement: HTMLElement;
+    let periodButton: HTMLElement;
+    let prevButton: HTMLElement;
+    let nextButton: HTMLElement;
+    let calendarInstance: MatCalendar<Date>;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(StandardCalendar);
+      fixture.detectChanges();
+
+      let calendarDebugElement = fixture.debugElement.query(By.directive(MatCalendar));
+      calendarElement = calendarDebugElement.nativeElement;
+      periodButton = calendarElement.querySelector('.mat-calendar-period-button') as HTMLElement;
+      prevButton = calendarElement.querySelector('.mat-calendar-previous-button') as HTMLElement;
+      nextButton = calendarElement.querySelector('.mat-calendar-next-button') as HTMLElement;
+
+      calendarInstance = calendarDebugElement.componentInstance;
+      testComponent = fixture.componentInstance;
+    });
+
+    it('should be in month view with specified month active', () => {
+      expect(calendarInstance.currentView).toBe('month');
+      expect(calendarInstance.activeDate).toEqual(new Date(2017, JAN, 31));
+    });
+
+    it('should toggle view when period clicked', () => {
+      expect(calendarInstance.currentView).toBe('month');
+
+      periodButton.click();
+      fixture.detectChanges();
+
+      expect(calendarInstance.currentView).toBe('multi-year');
+
+      periodButton.click();
+      fixture.detectChanges();
+
+      expect(calendarInstance.currentView).toBe('month');
+    });
+
+    it('should go to next and previous month', () => {
+      expect(calendarInstance.activeDate).toEqual(new Date(2017, JAN, 31));
+
+      nextButton.click();
+      fixture.detectChanges();
+
+      expect(calendarInstance.activeDate).toEqual(new Date(2017, FEB, 28));
+
+      prevButton.click();
+      fixture.detectChanges();
+
+      expect(calendarInstance.activeDate).toEqual(new Date(2017, JAN, 28));
+    });
+
+    it('should go to previous and next year', () => {
+      periodButton.click();
+      fixture.detectChanges();
+
+      expect(calendarInstance.currentView).toBe('multi-year');
+      expect(calendarInstance.activeDate).toEqual(new Date(2017, JAN, 31));
+
+      (calendarElement.querySelector('.mat-calendar-body-active') as HTMLElement).click();
+      fixture.detectChanges();
+
+      expect(calendarInstance.currentView).toBe('year');
+
+      nextButton.click();
+      fixture.detectChanges();
+
+      expect(calendarInstance.activeDate).toEqual(new Date(2018, JAN, 31));
+
+      prevButton.click();
+      fixture.detectChanges();
+
+      expect(calendarInstance.activeDate).toEqual(new Date(2017, JAN, 31));
+    });
+
+    it('should go to previous and next multi-year range', () => {
+      periodButton.click();
+      fixture.detectChanges();
+
+      expect(calendarInstance.currentView).toBe('multi-year');
+      expect(calendarInstance.activeDate).toEqual(new Date(2017, JAN, 31));
+
+      nextButton.click();
+      fixture.detectChanges();
+
+      expect(calendarInstance.activeDate).toEqual(new Date(2017 + yearsPerPage, JAN, 31));
+
+      prevButton.click();
+      fixture.detectChanges();
+
+      expect(calendarInstance.activeDate).toEqual(new Date(2017, JAN, 31));
+    });
+
+    it('should go back to month view after selecting year and month', () => {
+      periodButton.click();
+      fixture.detectChanges();
+
+      expect(calendarInstance.currentView).toBe('multi-year');
+      expect(calendarInstance.activeDate).toEqual(new Date(2017, JAN, 31));
+
+      let yearCells = calendarElement.querySelectorAll('.mat-calendar-body-cell');
+      (yearCells[0] as HTMLElement).click();
+      fixture.detectChanges();
+
+      expect(calendarInstance.currentView).toBe('year');
+      expect(calendarInstance.activeDate).toEqual(new Date(2016, JAN, 31));
+
+      let monthCells = calendarElement.querySelectorAll('.mat-calendar-body-cell');
+      (monthCells[monthCells.length - 1] as HTMLElement).click();
+      fixture.detectChanges();
+
+      expect(calendarInstance.currentView).toBe('month');
+      expect(calendarInstance.activeDate).toEqual(new Date(2016, DEC, 31));
+      expect(testComponent.selected).toBeFalsy('no date should be selected yet');
+    });
+
+  });
+});
+
+@Component({
+  template: `
+    <mat-calendar
+        [startAt]="startDate"
+        [(selected)]="selected"
+        (yearSelected)="selectedYear=$event"
+        (monthSelected)="selectedMonth=$event">
+    </mat-calendar>`
+})
+class StandardCalendar {
+  selected: Date;
+  selectedYear: Date;
+  selectedMonth: Date;
+  startDate = new Date(2017, JAN, 31);
+}

src/lib/datepicker/calendar.html

@@ -1,29 +1,10 @@
-<div class="mat-calendar-header">
-  <div class="mat-calendar-controls">
-    <button mat-button class="mat-calendar-period-button"
-            (click)="_currentPeriodClicked()"  [attr.aria-label]="_periodButtonLabel">
-      {{_periodButtonText}}
-      <div class="mat-calendar-arrow" [class.mat-calendar-invert]="_currentView != 'month'"></div>
-    </button>
 
-    <div class="mat-calendar-spacer"></div>
+<ng-template [cdkPortalOutlet]="_calendarHeaderPortal"></ng-template>
 
-    <button mat-icon-button class="mat-calendar-previous-button"
-            [disabled]="!_previousEnabled()" (click)="_previousClicked()"
-            [attr.aria-label]="_prevButtonLabel">
-    </button>
-
-    <button mat-icon-button class="mat-calendar-next-button"
-            [disabled]="!_nextEnabled()" (click)="_nextClicked()"
-            [attr.aria-label]="_nextButtonLabel">
-    </button>
-  </div>
-</div>
-
-<div class="mat-calendar-content" [ngSwitch]="_currentView" cdkMonitorSubtreeFocus tabindex="-1">
+<div class="mat-calendar-content" [ngSwitch]="currentView" cdkMonitorSubtreeFocus tabindex="-1">
   <mat-month-view
       *ngSwitchCase="'month'"
-      [(activeDate)]="_activeDate"
+      [(activeDate)]="activeDate"
       [selected]="selected"
       [dateFilter]="dateFilter"
       [maxDate]="maxDate"
@@ -34,7 +15,7 @@
 
   <mat-year-view
       *ngSwitchCase="'year'"
-      [activeDate]="_activeDate"
+      [activeDate]="activeDate"
       [selected]="selected"
       [dateFilter]="dateFilter"
       [maxDate]="maxDate"
@@ -45,7 +26,7 @@
 
   <mat-multi-year-view
       *ngSwitchCase="'multi-year'"
-      [activeDate]="_activeDate"
+      [activeDate]="activeDate"
       [selected]="selected"
       [dateFilter]="dateFilter"
       [maxDate]="maxDate"