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"