From 60f631bc866311c510c31243826c591820d238c8 Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Fri, 2 Mar 2018 11:05:39 -0800
Subject: [PATCH] color docs

---
 src/demo-app/datepicker/datepicker-demo.html      |  6 +++---
 src/lib/datepicker/datepicker.md                  |  8 ++++++++
 src/lib/datepicker/datepicker.ts                  | 15 ++++++++++-----
 .../datepicker-color/datepicker-color-example.css |  1 +
 .../datepicker-color-example.html                 | 13 +++++++++++++
 .../datepicker-color/datepicker-color-example.ts  |  9 +++++++++
 6 files changed, 44 insertions(+), 8 deletions(-)
 create mode 100644 src/material-examples/datepicker-color/datepicker-color-example.css
 create mode 100644 src/material-examples/datepicker-color/datepicker-color-example.html
 create mode 100644 src/material-examples/datepicker-color/datepicker-color-example.ts

diff --git a/src/demo-app/datepicker/datepicker-demo.html b/src/demo-app/datepicker/datepicker-demo.html
index efa35dcf189c..e5771e8fa609 100644
--- a/src/demo-app/datepicker/datepicker-demo.html
+++ b/src/demo-app/datepicker/datepicker-demo.html
@@ -14,14 +14,14 @@ <h2>Options</h2>
   </mat-form-field>
 </p>
 <p>
-  <mat-form-field>
+  <mat-form-field color="accent">
     <mat-label>Min date</mat-label>
     <input matInput [matDatepicker]="minDatePicker" [(ngModel)]="minDate"
         [disabled]="inputDisabled">
     <mat-datepicker-toggle matSuffix [for]="minDatePicker"></mat-datepicker-toggle>
     <mat-datepicker #minDatePicker [touchUi]="touch" [disabled]="datepickerDisabled"></mat-datepicker>
   </mat-form-field>
-  <mat-form-field>
+  <mat-form-field color="accent">
     <mat-label>Max date</mat-label>
     <input matInput [matDatepicker]="maxDatePicker" [(ngModel)]="maxDate"
         [disabled]="inputDisabled">
@@ -30,7 +30,7 @@ <h2>Options</h2>
   </mat-form-field>
 </p>
 <p>
-  <mat-form-field>
+  <mat-form-field color="accent">
     <mat-label>Start at date</mat-label>
     <input matInput [matDatepicker]="startAtPicker" [(ngModel)]="startAt"
         [disabled]="inputDisabled">
diff --git a/src/lib/datepicker/datepicker.md b/src/lib/datepicker/datepicker.md
index c2dcb2edb0cc..666b4e021bf1 100644
--- a/src/lib/datepicker/datepicker.md
+++ b/src/lib/datepicker/datepicker.md
@@ -99,6 +99,14 @@ As with other types of `<input>`, the datepicker works with `@angular/forms` dir
 
 <!-- example(datepicker-value) -->
 
+### Changing the datepicker colors
+
+The datepicker popup will automatically inherit the color palette (`primary`, `accent`, or `warn`)
+from the `mat-form-field` it is attached to. If you would like to specify a different palette for
+the popup you can do so by setting the `color` property on `mat-datepicker`.
+
+<!-- example(datepicker-color) -->
+
 ### Date validation
 
 There are three properties that add date validation to the datepicker input. The first two are the
diff --git a/src/lib/datepicker/datepicker.ts b/src/lib/datepicker/datepicker.ts
index 6106e5261158..47d102f4922f 100644
--- a/src/lib/datepicker/datepicker.ts
+++ b/src/lib/datepicker/datepicker.ts
@@ -153,7 +153,15 @@ export class MatDatepicker<D> implements OnDestroy, CanColor {
   @Input() startView: 'month' | 'year' = 'month';
 
   /** Color palette to use on the datepicker's calendar. */
-  @Input() color: ThemePalette;
+  @Input()
+  get color(): ThemePalette {
+    return this._color ||
+        (this._datepickerInput ? this._datepickerInput._getThemePalette() : undefined);
+  }
+  set color(value: ThemePalette) {
+    this._color = value;
+  }
+  _color: ThemePalette;
 
   /**
    * Whether the calendar UI is in touch mode. In touch mode the calendar opens in a dialog rather
@@ -464,13 +472,10 @@ export class MatDatepicker<D> implements OnDestroy, CanColor {
 
   /** Passes the current theme color along to the calendar overlay. */
   private _setColor(): void {
-    const input = this._datepickerInput;
-    const color = this.color || (input ? input._getThemePalette() : undefined);
-
+    const color = this.color;
     if (this._popupComponentRef) {
       this._popupComponentRef.instance.color = color;
     }
-
     if (this._dialogRef) {
       this._dialogRef.componentInstance.color = color;
     }
diff --git a/src/material-examples/datepicker-color/datepicker-color-example.css b/src/material-examples/datepicker-color/datepicker-color-example.css
new file mode 100644
index 000000000000..7432308753e6
--- /dev/null
+++ b/src/material-examples/datepicker-color/datepicker-color-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/material-examples/datepicker-color/datepicker-color-example.html b/src/material-examples/datepicker-color/datepicker-color-example.html
new file mode 100644
index 000000000000..c7e033273c8b
--- /dev/null
+++ b/src/material-examples/datepicker-color/datepicker-color-example.html
@@ -0,0 +1,13 @@
+<mat-form-field color="accent">
+  <mat-label>Inherited calendar color</mat-label>
+  <input matInput [matDatepicker]="picker1">
+  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
+  <mat-datepicker #picker1></mat-datepicker>
+</mat-form-field>
+
+<mat-form-field color="accent">
+  <mat-label>Custom calendar color</mat-label>
+  <input matInput [matDatepicker]="picker2">
+  <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
+  <mat-datepicker #picker2 color="primary"></mat-datepicker>
+</mat-form-field>
diff --git a/src/material-examples/datepicker-color/datepicker-color-example.ts b/src/material-examples/datepicker-color/datepicker-color-example.ts
new file mode 100644
index 000000000000..f7474426ef47
--- /dev/null
+++ b/src/material-examples/datepicker-color/datepicker-color-example.ts
@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+/** @title Datepicker palette colors */
+@Component({
+  selector: 'datepicker-color-example',
+  templateUrl: 'datepicker-color-example.html',
+  styleUrls: ['datepicker-color-example.css'],
+})
+export class DatepickerColorExample {}