fix(datepicker): make datepicker work in compatibility mode (#4686)

* fix(datepicker): make datepicker work in compatibility mode

* add test

* address comments

Author: mmalerba

src/lib/datepicker/calendar.html

@@ -1,16 +1,42 @@
 <div class="mat-calendar-header">
   <div class="mat-calendar-controls">
-    <button md-button class="mat-calendar-period-button" (click)="_currentPeriodClicked()"
-            [attr.aria-label]="_periodButtonLabel">
+    <!--
+      TODO(mmalerba): Clean up duplicated compatibility mode code when we have a better way to do
+      this.
+    -->
+
+    <!-- Check for compatibility mode and use correct prefix for md-button. -->
+    <button *ngIf="!_isCompatibilityMode" md-button class="mat-calendar-period-button"
+            (click)="_currentPeriodClicked()"  [attr.aria-label]="_periodButtonLabel">
       {{_periodButtonText}}
       <div class="mat-calendar-arrow" [class.mat-calendar-invert]="!_monthView"></div>
     </button>
+    <button *ngIf="_isCompatibilityMode" mat-button class="mat-calendar-period-button"
+            (click)="_currentPeriodClicked()"  [attr.aria-label]="_periodButtonLabel">
+      {{_periodButtonText}}
+      <div class="mat-calendar-arrow" [class.mat-calendar-invert]="!_monthView"></div>
+    </button>
+
     <div class="mat-calendar-spacer"></div>
-    <button md-icon-button class="mat-calendar-previous-button" [disabled]="!_previousEnabled()"
-            (click)="_previousClicked()" [attr.aria-label]="_prevButtonLabel">
+
+    <!-- Check for compatibility mode and use correct prefix for md-icon-button. -->
+    <button *ngIf="!_isCompatibilityMode" md-icon-button class="mat-calendar-previous-button"
+            [disabled]="!_previousEnabled()" (click)="_previousClicked()"
+            [attr.aria-label]="_prevButtonLabel">
+    </button>
+    <button *ngIf="_isCompatibilityMode" mat-icon-button class="mat-calendar-previous-button"
+            [disabled]="!_previousEnabled()" (click)="_previousClicked()"
+            [attr.aria-label]="_prevButtonLabel">
+    </button>
+
+    <!-- Check for compatibility mode and use correct prefix for md-icon-button. -->
+    <button *ngIf="!_isCompatibilityMode" md-icon-button class="mat-calendar-next-button"
+            [disabled]="!_nextEnabled()" (click)="_nextClicked()"
+            [attr.aria-label]="_nextButtonLabel">
     </button>
-    <button md-icon-button class="mat-calendar-next-button" [disabled]="!_nextEnabled()"
-            (click)="_nextClicked()" [attr.aria-label]="_nextButtonLabel">
+    <button *ngIf="_isCompatibilityMode" mat-icon-button class="mat-calendar-next-button"
+            [disabled]="!_nextEnabled()" (click)="_nextClicked()"
+            [attr.aria-label]="_nextButtonLabel">
     </button>
   </div>
 </div>

src/lib/datepicker/calendar.spec.ts

@@ -23,6 +23,8 @@ import {
 } from '../core/keyboard/keycodes';
 import {MdDatepickerIntl} from './datepicker-intl';
 import {MdNativeDateModule} from '../core/datetime/index';
+import {NoConflictStyleCompatibilityMode} from '../core';
+import {MdButtonModule} from '../button/index';
 
 
 // When constructing a Date, the month is zero-based. This can be confusing, since people are
@@ -35,6 +37,7 @@ describe('MdCalendar', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [
+        MdButtonModule,
         MdNativeDateModule,
       ],
       declarations: [
@@ -444,18 +447,13 @@ describe('MdCalendar', () => {
     let fixture: ComponentFixture<CalendarWithMinMax>;
     let testComponent: CalendarWithMinMax;
     let calendarElement: HTMLElement;
-    let prevButton: HTMLButtonElement;
-    let nextButton: HTMLButtonElement;
     let calendarInstance: MdCalendar<Date>;
 
     beforeEach(() => {
       fixture = TestBed.createComponent(CalendarWithMinMax);
 
       let calendarDebugElement = fixture.debugElement.query(By.directive(MdCalendar));
       calendarElement = calendarDebugElement.nativeElement;
-      prevButton =
-          calendarElement.querySelector('.mat-calendar-previous-button') as HTMLButtonElement;
-      nextButton = calendarElement.querySelector('.mat-calendar-next-button') as HTMLButtonElement;
       calendarInstance = calendarDebugElement.componentInstance;
       testComponent = fixture.componentInstance;
     });
@@ -478,6 +476,9 @@ describe('MdCalendar', () => {
       testComponent.startAt = new Date(2016, FEB, 1);
       fixture.detectChanges();
 
+      let prevButton =
+          calendarElement.querySelector('.mat-calendar-previous-button') as HTMLButtonElement;
+
       expect(prevButton.disabled).toBe(false, 'previous button should not be disabled');
       expect(calendarInstance._activeDate).toEqual(new Date(2016, FEB, 1));
 
@@ -497,6 +498,9 @@ describe('MdCalendar', () => {
       testComponent.startAt = new Date(2017, DEC, 1);
       fixture.detectChanges();
 
+      let nextButton =
+          calendarElement.querySelector('.mat-calendar-next-button') as HTMLButtonElement;
+
       expect(nextButton.disabled).toBe(false, 'next button should not be disabled');
       expect(calendarInstance._activeDate).toEqual(new Date(2017, DEC, 1));
 
@@ -584,6 +588,37 @@ describe('MdCalendar', () => {
   });
 });
 
+describe('MdCalendar in compatibility mode', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        MdButtonModule,
+        MdNativeDateModule,
+        NoConflictStyleCompatibilityMode,
+      ],
+      declarations: [
+        MdCalendar,
+        MdCalendarBody,
+        MdMonthView,
+        MdYearView,
+
+        // Test components.
+        StandardCalendar,
+      ],
+      providers: [
+        MdDatepickerIntl,
+      ],
+    });
+
+    TestBed.compileComponents();
+  }));
+
+  it('should not throw on creation', () => {
+    let fixture = TestBed.createComponent(StandardCalendar);
+    expect(() => fixture.detectChanges()).not.toThrow();
+  });
+});
+
 
 @Component({
   template: `<md-calendar [startAt]="startDate" [(selected)]="selected"></md-calendar>`

src/lib/datepicker/calendar.ts

@@ -26,6 +26,7 @@ import {DateAdapter} from '../core/datetime/index';
 import {MdDatepickerIntl} from './datepicker-intl';
 import {createMissingDateImplError} from './datepicker-errors';
 import {MD_DATE_FORMATS, MdDateFormats} from '../core/datetime/date-formats';
+import {MATERIAL_COMPATIBILITY_MODE} from '../core';
 
 
 /**
@@ -111,6 +112,7 @@ export class MdCalendar<D> implements AfterContentInit {
   constructor(private _elementRef: ElementRef,
               private _intl: MdDatepickerIntl,
               private _ngZone: NgZone,
+              @Optional() @Inject(MATERIAL_COMPATIBILITY_MODE) public _isCompatibilityMode: boolean,
               @Optional() private _dateAdapter: DateAdapter<D>,
               @Optional() @Inject(MD_DATE_FORMATS) private _dateFormats: MdDateFormats) {
     if (!this._dateAdapter) {