From d95838d2c915cdcfb782f94c9b5fa43cbe1cda0c Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Fri, 19 May 2017 10:45:52 -0700
Subject: [PATCH 1/3] fix(datepicker): make datepicker work in compatibility
 mode

---
 src/lib/datepicker/calendar.html | 34 ++++++++++++++++++++++++++------
 src/lib/datepicker/calendar.ts   |  2 ++
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/lib/datepicker/calendar.html b/src/lib/datepicker/calendar.html
index 244a6640bda5..e14b7e3942a7 100644
--- a/src/lib/datepicker/calendar.html
+++ b/src/lib/datepicker/calendar.html
@@ -1,16 +1,38 @@
 <div class="mat-calendar-header">
   <div class="mat-calendar-controls">
-    <button md-button class="mat-calendar-period-button" (click)="_currentPeriodClicked()"
-            [attr.aria-label]="_periodButtonLabel">
+
+    <!-- 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>
diff --git a/src/lib/datepicker/calendar.ts b/src/lib/datepicker/calendar.ts
index 9c6905a7f02d..faff96fec542 100644
--- a/src/lib/datepicker/calendar.ts
+++ b/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) {

From b677bdc07823b2a229144c536237e346ad91bdb0 Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Fri, 19 May 2017 13:25:33 -0700
Subject: [PATCH 2/3] add test

---
 src/lib/datepicker/calendar.spec.ts | 45 +++++++++++++++++++++++++----
 1 file changed, 40 insertions(+), 5 deletions(-)

diff --git a/src/lib/datepicker/calendar.spec.ts b/src/lib/datepicker/calendar.spec.ts
index f632b4f204e1..2da229f7578c 100644
--- a/src/lib/datepicker/calendar.spec.ts
+++ b/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,8 +447,6 @@ describe('MdCalendar', () => {
     let fixture: ComponentFixture<CalendarWithMinMax>;
     let testComponent: CalendarWithMinMax;
     let calendarElement: HTMLElement;
-    let prevButton: HTMLButtonElement;
-    let nextButton: HTMLButtonElement;
     let calendarInstance: MdCalendar<Date>;
 
     beforeEach(() => {
@@ -453,9 +454,6 @@ describe('MdCalendar', () => {
 
       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>`

From 2429c9ae8677e74c2bffe130081a6cdaf0f12837 Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Fri, 19 May 2017 13:54:49 -0700
Subject: [PATCH 3/3] address comments

---
 src/lib/datepicker/calendar.html | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/lib/datepicker/calendar.html b/src/lib/datepicker/calendar.html
index e14b7e3942a7..d6f507bc0c24 100644
--- a/src/lib/datepicker/calendar.html
+++ b/src/lib/datepicker/calendar.html
@@ -1,5 +1,9 @@
 <div class="mat-calendar-header">
   <div class="mat-calendar-controls">
+    <!--
+      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"