feat(datepicker): Add Custom Header to DatePicker (#9639)

* feature (add custom header to mat-calendar)

TODO: the custom header should be passed from datepicker

* refactor (define custom header component)

* refactor (remove useless text)

* refactor (pass custom header component type as input)

* refactor (add header as component portal)

* refactor (custom header as component portal)

- TODO: solve problem with directive cdkPortalOutlet in calendar.html

* refactor (switch for custom header component)

* refactor (define entry components)

* fix (correct entry point)

* refactor (custom header component): add test function to custom header component

* refactor (some code formatting)

* refactor (set indentation to two spaces)

* refactor (formatting)

* refactor (custom header for mat-calendar): renaming and code improvements

* refactor (calendarHeaderComponent) rename input of MatDatepicker

* refactor (calendarHeaderComponent): make a demo for custom header

* refactor (calendar header): make calendar header portal variable public

* refactor (calendar header): formatting

* tests (MatCalendar): fix tests

* tests (calendar): fix import issue

* tests (MatCalendar): remove unused import

* tests (MatCalendar): import MatDatepickerModule without redeclaration

* tests (MatCalendar): fix imports

* refactor (MatCalendar): default header comes with empty template

* refactor (MatCalendar): remove useless newline

* feature (MatCalendarHeader): move header in own template

* refactor (MatCalendar): some code reformatting

* fix (MatCalendar): add missin change detection for MatCalendarHeader

* refactor (MatCalendar): fix indentation

* fix (MatCalendar): clean stream up after component destruction

* fix (MatCalendar): fix change detection for MatCalendarHeader

* refactor (MatCalendarHeader): add dateadapter to constructor

* refactor (MatCalendarHeader): move methods to calendar header (ongoing)

* refactor (MatCalendarHeader): move label getter methods to MatCalendarHeader

* refactor (MatCalendarHeader): move MatCalendarHeader component in a separate file

* tests (MatCalendarHeader): move header related tests from MatCalendar (ongoing)

* refactor (MatCalendar): linting

* refactor (MatCalendarHeader): move MatCalendarHeader component back to calendar.ts (to avoid circular deps)

* refactor (MatCalendarHeader): move header related methods

* feature (MatCalendarHeader): add sample custom header controls to demo page

* refactor (MatCalendarHeader): fix some styling issues

* refactor (MatCalendarHeader): fix indentation

* refactor (MatCalendarHeader): make calendar private for custom header

* refactor (MatCalendarHeader): use type parameter for header (generics)

* refactor (MatCalendarHeader): make template file for custom header on demo page

* refactor (MatCalendarHeader): separate section own demo page

* refactor (MatCalendarHeader): style custom header

* refactor (MatCalendarHeader): fix styling issue

* refactor (package-lock.json): revert changes to version on master branch

* refactor (package-lock.json): revert to commit 6f63fd2

* fix (MatCalendarHeader): correct forward reference to MatCalendar

* Add `stateChanges` to `MatCalendar`

* fix nits

Author: tobiasschweizer

package-lock.json

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

@@ -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/custom-header.scss

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

@@ -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/datepicker/datepicker-demo.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/demo-app/demo-app/demo-module.ts

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

@@ -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-header.spec.ts

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