From 4ade52bccd336f2e9532d0b5f31ee0041aab24a1 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Wed, 10 Jun 2020 19:02:26 +0200
Subject: [PATCH] fix(datepicker): placeholder not behaving correctly in legacy
 form field

- Fixes the date range picker's placeholder not behaving correctly when it's placed inside of a form field with the `legacy` appearance.
- Fixes several range picker examples that were setting `matInput` on `matStartDate` and `matEndDate` which isn't required.
---
 .../date-range-picker-comparison-example.html      |  8 ++++----
 .../date-range-picker-forms-example.html           |  4 ++--
 .../date-range-picker-overview-example.html        |  4 ++--
 ...te-range-picker-selection-strategy-example.html |  4 ++--
 src/dev-app/datepicker/datepicker-demo.html        |  7 +++----
 src/material/datepicker/date-range-input-parts.ts  |  5 +++++
 src/material/datepicker/date-range-input.html      |  4 +++-
 src/material/datepicker/date-range-input.scss      | 14 +++++++-------
 src/material/datepicker/date-range-input.spec.ts   |  6 ++++++
 src/material/datepicker/date-range-input.ts        | 13 +++++++++++--
 src/material/datepicker/datepicker.md              | 10 +++++-----
 tools/public_api_guard/material/datepicker.d.ts    |  3 ++-
 12 files changed, 52 insertions(+), 30 deletions(-)

diff --git a/src/components-examples/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.html b/src/components-examples/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.html
index 8b44b056077c..7693d8151cef 100644
--- a/src/components-examples/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.html
+++ b/src/components-examples/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.html
@@ -5,8 +5,8 @@
     [rangePicker]="campaignOnePicker"
     [comparisonStart]="campaignTwo.value.start"
     [comparisonEnd]="campaignTwo.value.end">
-    <input matStartDate matInput placeholder="Start date" formControlName="start">
-    <input matEndDate matInput placeholder="End date" formControlName="end">
+    <input matStartDate placeholder="Start date" formControlName="start">
+    <input matEndDate placeholder="End date" formControlName="end">
   </mat-date-range-input>
   <mat-datepicker-toggle matSuffix [for]="campaignOnePicker"></mat-datepicker-toggle>
   <mat-date-range-picker #campaignOnePicker></mat-date-range-picker>
@@ -19,8 +19,8 @@
     [rangePicker]="campaignTwoPicker"
     [comparisonStart]="campaignOne.value.start"
     [comparisonEnd]="campaignOne.value.end">
-    <input matStartDate matInput placeholder="Start date" formControlName="start">
-    <input matEndDate matInput placeholder="End date" formControlName="end">
+    <input matStartDate placeholder="Start date" formControlName="start">
+    <input matEndDate placeholder="End date" formControlName="end">
   </mat-date-range-input>
   <mat-datepicker-toggle matSuffix [for]="campaignTwoPicker"></mat-datepicker-toggle>
   <mat-date-range-picker #campaignTwoPicker></mat-date-range-picker>
diff --git a/src/components-examples/material/datepicker/date-range-picker-forms/date-range-picker-forms-example.html b/src/components-examples/material/datepicker/date-range-picker-forms/date-range-picker-forms-example.html
index a1eab434607f..33cf221f4143 100644
--- a/src/components-examples/material/datepicker/date-range-picker-forms/date-range-picker-forms-example.html
+++ b/src/components-examples/material/datepicker/date-range-picker-forms/date-range-picker-forms-example.html
@@ -1,8 +1,8 @@
 <mat-form-field>
   <mat-label>Enter a date range</mat-label>
   <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
-    <input matStartDate matInput formControlName="start" placeholder="Start date">
-    <input matEndDate matInput formControlName="end" placeholder="End date">
+    <input matStartDate formControlName="start" placeholder="Start date">
+    <input matEndDate formControlName="end" placeholder="End date">
   </mat-date-range-input>
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-date-range-picker #picker></mat-date-range-picker>
diff --git a/src/components-examples/material/datepicker/date-range-picker-overview/date-range-picker-overview-example.html b/src/components-examples/material/datepicker/date-range-picker-overview/date-range-picker-overview-example.html
index 777f02010ea7..91188643e4ba 100644
--- a/src/components-examples/material/datepicker/date-range-picker-overview/date-range-picker-overview-example.html
+++ b/src/components-examples/material/datepicker/date-range-picker-overview/date-range-picker-overview-example.html
@@ -1,8 +1,8 @@
 <mat-form-field>
   <mat-label>Enter a date range</mat-label>
   <mat-date-range-input [rangePicker]="picker">
-    <input matStartDate matInput placeholder="Start date">
-    <input matEndDate matInput placeholder="End date">
+    <input matStartDate placeholder="Start date">
+    <input matEndDate placeholder="End date">
   </mat-date-range-input>
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-date-range-picker #picker></mat-date-range-picker>
diff --git a/src/components-examples/material/datepicker/date-range-picker-selection-strategy/date-range-picker-selection-strategy-example.html b/src/components-examples/material/datepicker/date-range-picker-selection-strategy/date-range-picker-selection-strategy-example.html
index 777f02010ea7..91188643e4ba 100644
--- a/src/components-examples/material/datepicker/date-range-picker-selection-strategy/date-range-picker-selection-strategy-example.html
+++ b/src/components-examples/material/datepicker/date-range-picker-selection-strategy/date-range-picker-selection-strategy-example.html
@@ -1,8 +1,8 @@
 <mat-form-field>
   <mat-label>Enter a date range</mat-label>
   <mat-date-range-input [rangePicker]="picker">
-    <input matStartDate matInput placeholder="Start date">
-    <input matEndDate matInput placeholder="End date">
+    <input matStartDate placeholder="Start date">
+    <input matEndDate placeholder="End date">
   </mat-date-range-input>
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-date-range-picker #picker></mat-date-range-picker>
diff --git a/src/dev-app/datepicker/datepicker-demo.html b/src/dev-app/datepicker/datepicker-demo.html
index ff7b15a6b8a2..4593f1038d0d 100644
--- a/src/dev-app/datepicker/datepicker-demo.html
+++ b/src/dev-app/datepicker/datepicker-demo.html
@@ -173,8 +173,7 @@ <h2>Datepicker with custom header extending the default header</h2>
 <h2>Range picker</h2>
 
 <div class="demo-range-group">
-  <mat-form-field>
-    <mat-label>Enter a date range</mat-label>
+  <mat-form-field appearance="legacy">
     <mat-date-range-input
       [formGroup]="range1"
       [rangePicker]="range1Picker"
@@ -184,8 +183,8 @@ <h2>Range picker</h2>
       [comparisonStart]="comparisonStart"
       [comparisonEnd]="comparisonEnd"
       [dateFilter]="filterOdd ? dateFilter : undefined">
-      <input matStartDate formControlName="start" placeholder="Start date"/>
-      <input matEndDate formControlName="end" placeholder="End date"/>
+      <input matStartDate formControlName="start"/>
+      <input matEndDate formControlName="end"/>
     </mat-date-range-input>
     <mat-datepicker-toggle [for]="range1Picker" matSuffix></mat-datepicker-toggle>
     <mat-date-range-picker
diff --git a/src/material/datepicker/date-range-input-parts.ts b/src/material/datepicker/date-range-input-parts.ts
index 6d30b24e88e3..bdd135329380 100644
--- a/src/material/datepicker/date-range-input-parts.ts
+++ b/src/material/datepicker/date-range-input-parts.ts
@@ -125,6 +125,11 @@ abstract class MatDateRangeInputPartBase<D>
     return this._elementRef.nativeElement.value.length === 0;
   }
 
+  /** Gets the placeholder of the input. */
+  _getPlaceholder() {
+    return this._elementRef.nativeElement.placeholder;
+  }
+
   /** Focuses the input. */
   focus(): void {
     this._elementRef.nativeElement.focus();
diff --git a/src/material/datepicker/date-range-input.html b/src/material/datepicker/date-range-input.html
index 1187d2feeb90..dcdc918ef9da 100644
--- a/src/material/datepicker/date-range-input.html
+++ b/src/material/datepicker/date-range-input.html
@@ -9,7 +9,9 @@
       aria-hidden="true">{{_getInputMirrorValue()}}</span>
   </div>
 
-  <span class="mat-date-range-input-separator">{{separator}}</span>
+  <span
+    class="mat-date-range-input-separator"
+    [class.mat-date-range-input-separator-hidden]="_shouldHideSeparator()">{{separator}}</span>
 
   <div class="mat-date-range-input-end-wrapper">
     <ng-content select="input[matEndDate]"></ng-content>
diff --git a/src/material/datepicker/date-range-input.scss b/src/material/datepicker/date-range-input.scss
index d16cd04ed084..a907ff762873 100644
--- a/src/material/datepicker/date-range-input.scss
+++ b/src/material/datepicker/date-range-input.scss
@@ -22,14 +22,14 @@ $mat-date-range-input-placeholder-transition:
 .mat-date-range-input-separator {
   margin: 0 $mat-date-range-input-separator-spacing;
   transition: $mat-date-range-input-placeholder-transition;
+}
 
-  .mat-form-field-hide-placeholder & {
-    // Disable text selection, because the user can click
-    // through the main label when the input is disabled.
-    @include user-select(none);
-    color: transparent;
-    transition: none;
-  }
+.mat-date-range-input-separator-hidden {
+  // Disable text selection, because the user can click
+  // through the main label when the input is disabled.
+  @include user-select(none);
+  color: transparent;
+  transition: none;
 }
 
 // Underlying input inside the range input.
diff --git a/src/material/datepicker/date-range-input.spec.ts b/src/material/datepicker/date-range-input.spec.ts
index e6ef835d498c..687b99f0eb8d 100644
--- a/src/material/datepicker/date-range-input.spec.ts
+++ b/src/material/datepicker/date-range-input.spec.ts
@@ -503,6 +503,12 @@ describe('MatDateRangeInput', () => {
     expect(start.nativeElement.focus).not.toHaveBeenCalled();
   });
 
+  it('should be able to get the input placeholder', () => {
+    const fixture = createComponent(StandardRangePicker);
+    fixture.detectChanges();
+    expect(fixture.componentInstance.rangeInput.placeholder).toBe('Start date – End date');
+  });
+
 });
 
 @Component({
diff --git a/src/material/datepicker/date-range-input.ts b/src/material/datepicker/date-range-input.ts
index 4be258c20868..0070bba47479 100644
--- a/src/material/datepicker/date-range-input.ts
+++ b/src/material/datepicker/date-range-input.ts
@@ -80,11 +80,15 @@ export class MatDateRangeInput<D> implements MatFormFieldControl<DateRange<D>>,
   controlType = 'mat-date-range-input';
 
   /**
-   * Implemented as a part of `MatFormFieldControl`, but not used.
+   * Implemented as a part of `MatFormFieldControl`.
    * Set the placeholder attribute on `matStartDate` and `matEndDate`.
    * @docs-private
    */
-  placeholder: string;
+  get placeholder() {
+    const start = this._startInput?._getPlaceholder() || '';
+    const end = this._endInput?._getPlaceholder() || '';
+    return (start || end) ? `${start} ${this.separator} ${end}` : '';
+  }
 
   /** The range picker that this input is associated with. */
   @Input()
@@ -297,6 +301,11 @@ export class MatDateRangeInput<D> implements MatFormFieldControl<DateRange<D>>,
     }
   }
 
+  /** Whether the separate text should be hidden. */
+  _shouldHideSeparator() {
+    return (!this._formField || this._formField._hideControlPlaceholder()) && this.empty;
+  }
+
   /**
    * @param obj The object to check.
    * @returns The given object if it is both a date instance and valid, otherwise null.
diff --git a/src/material/datepicker/datepicker.md b/src/material/datepicker/datepicker.md
index ed4e560a42d9..b71e33833bac 100644
--- a/src/material/datepicker/datepicker.md
+++ b/src/material/datepicker/datepicker.md
@@ -11,7 +11,7 @@ property on the text input.
 There is also an optional datepicker toggle button that gives the user an easy way to open the datepicker pop-up.
 
 <!-- example({"example":"datepicker-overview",
-              "file":"datepicker-overview-example.html", 
+              "file":"datepicker-overview-example.html",
               "region":"toggle"}) -->
 
 This works exactly the same with an input that is part of an `<mat-form-field>` and the toggle
@@ -36,8 +36,8 @@ respectively:
 
 ```html
 <mat-date-range-input>
-  <input matStartDate matInput placeholder="Start date">
-  <input matEndDate matInput placeholder="End date">
+  <input matStartDate placeholder="Start date">
+  <input matEndDate placeholder="End date">
 </mat-date-range-input>
 ```
 
@@ -52,8 +52,8 @@ Connect the range picker and range input using the `rangePicker` property:
 
 ```html
 <mat-date-range-input [rangePicker]="picker">
-  <input matStartDate matInput placeholder="Start date">
-  <input matEndDate matInput placeholder="End date">
+  <input matStartDate placeholder="Start date">
+  <input matEndDate placeholder="End date">
 </mat-date-range-input>
 
 <mat-date-range-picker #picker></mat-date-range-picker>
diff --git a/tools/public_api_guard/material/datepicker.d.ts b/tools/public_api_guard/material/datepicker.d.ts
index 7a4722c1251b..dee053dcb0c9 100644
--- a/tools/public_api_guard/material/datepicker.d.ts
+++ b/tools/public_api_guard/material/datepicker.d.ts
@@ -308,7 +308,7 @@ export declare class MatDateRangeInput<D> implements MatFormFieldControl<DateRan
     get min(): D | null;
     set min(value: D | null);
     ngControl: NgControl | null;
-    placeholder: string;
+    get placeholder(): string;
     get rangePicker(): MatDateRangePicker<D>;
     set rangePicker(rangePicker: MatDateRangePicker<D>);
     get required(): boolean;
@@ -322,6 +322,7 @@ export declare class MatDateRangeInput<D> implements MatFormFieldControl<DateRan
     _handleChildValueChange(): void;
     _openDatepicker(): void;
     _shouldHidePlaceholders(): boolean;
+    _shouldHideSeparator(): boolean;
     getConnectedOverlayOrigin(): ElementRef;
     getStartValue(): D | null;
     getThemePalette(): ThemePalette;