Add public method to MatCalendar to update today's date (#11821)

Author: tobiasschweizer

src/lib/datepicker/calendar.spec.ts

@@ -1,18 +1,15 @@
-import {
-  ENTER,
-  RIGHT_ARROW,
-} from '@angular/cdk/keycodes';
+import {Direction, Directionality} from '@angular/cdk/bidi';
+import {ENTER, RIGHT_ARROW} from '@angular/cdk/keycodes';
 import {
   dispatchFakeEvent,
   dispatchKeyboardEvent,
   dispatchMouseEvent,
   MockNgZone,
 } from '@angular/cdk/testing';
 import {Component, NgZone} from '@angular/core';
-import {ComponentFixture, TestBed, async, inject} from '@angular/core/testing';
-import {DEC, FEB, JAN, MatNativeDateModule, NOV, JUL} from '@angular/material/core';
+import {async, ComponentFixture, inject, TestBed} from '@angular/core/testing';
+import {DateAdapter, DEC, FEB, JAN, JUL, MatNativeDateModule, NOV} from '@angular/material/core';
 import {By} from '@angular/platform-browser';
-import {Direction, Directionality} from '@angular/cdk/bidi';
 import {MatCalendar} from './calendar';
 import {MatDatepickerIntl} from './datepicker-intl';
 import {MatDatepickerModule} from './datepicker-module';
@@ -63,6 +60,27 @@ describe('MatCalendar', () => {
       testComponent = fixture.componentInstance;
     });
 
+    it(`should update today's date`, inject([DateAdapter], (adapter: DateAdapter<Date>) => {
+      let fakeToday = new Date(2018, 0, 1);
+      spyOn(adapter, 'today').and.callFake(() => fakeToday);
+
+      calendarInstance.activeDate = fakeToday;
+      calendarInstance.updateTodaysDate();
+      fixture.detectChanges();
+
+      let todayCell = calendarElement.querySelector('.mat-calendar-body-today')!;
+      expect(todayCell).not.toBeNull();
+      expect(todayCell.innerHTML.trim()).toBe('1');
+
+      fakeToday = new Date(2018, 0, 10);
+      calendarInstance.updateTodaysDate();
+      fixture.detectChanges();
+
+      todayCell = calendarElement.querySelector('.mat-calendar-body-today')!;
+      expect(todayCell).not.toBeNull();
+      expect(todayCell.innerHTML.trim()).toBe('10');
+    }));
+
     it('should be in month view with specified month active', () => {
       expect(calendarInstance.currentView).toBe('month');
       expect(calendarInstance.activeDate).toEqual(new Date(2017, JAN, 31));

src/lib/datepicker/calendar.ts

@@ -334,6 +334,14 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
     this._getCurrentViewComponent()._focusActiveCell();
   }
 
+  /** Updates today's date after an update of the active date */
+  updateTodaysDate() {
+    let view = this.currentView == 'month' ? this.monthView :
+            (this.currentView == 'year' ? this.yearView : this.multiYearView);
+
+    view.ngAfterContentInit();
+  }
+
   /** Handles date selection in the month view. */
   _dateSelected(date: D): void {
     if (!this._dateAdapter.sameDate(date, this.selected)) {

src/lib/datepicker/datepicker-content.html

@@ -9,7 +9,7 @@
     [headerComponent]="datepicker.calendarHeaderComponent"
     [selected]="datepicker._selected"
     [@fadeInCalendar]="'enter'"
-    (selectedChange)="datepicker._select($event)"
+    (selectedChange)="datepicker.select($event)"
     (yearSelected)="datepicker._selectYear($event)"
     (monthSelected)="datepicker._selectMonth($event)"
     (_userSelection)="datepicker.close()">

src/lib/datepicker/datepicker.spec.ts

@@ -623,7 +623,7 @@ describe('MatDatepicker', () => {
         expect(testComponent.datepickerInput.value).toBeNull();
 
         let selected = new Date(2017, JAN, 1);
-        testComponent.datepicker._select(selected);
+        testComponent.datepicker.select(selected);
         fixture.detectChanges();
         flush();
         fixture.detectChanges();
@@ -649,7 +649,7 @@ describe('MatDatepicker', () => {
 
         expect(inputEl.classList).toContain('ng-pristine');
 
-        testComponent.datepicker._select(new Date(2017, JAN, 1));
+        testComponent.datepicker.select(new Date(2017, JAN, 1));
         fixture.detectChanges();
         flush();
         fixture.detectChanges();
@@ -723,7 +723,7 @@ describe('MatDatepicker', () => {
 
         expect(inputEl.classList).toContain('ng-untouched');
 
-        testComponent.datepicker._select(new Date(2017, JAN, 1));
+        testComponent.datepicker.select(new Date(2017, JAN, 1));
         fixture.detectChanges();
         flush();
         fixture.detectChanges();
@@ -765,7 +765,7 @@ describe('MatDatepicker', () => {
         expect(testComponent.datepickerInput.value).toBeNull();
 
         let selected = new Date(2017, JAN, 1);
-        testComponent.datepicker._select(selected);
+        testComponent.datepicker.select(selected);
         fixture.detectChanges();
 
         expect(testComponent.formControl.value).toEqual(selected);

src/lib/datepicker/datepicker.ts

@@ -290,7 +290,7 @@ export class MatDatepicker<D> implements OnDestroy, CanColor {
   }
 
   /** Selects the given date */
-  _select(date: D): void {
+  select(date: D): void {
     let oldValue = this._selected;
     this._selected = date;
     if (!this._dateAdapter.sameDate(oldValue, this._selected)) {