fix(datepicker): placeholder not behaving correctly in legacy form field (angular#19595)

- 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.

Author: crisbeto

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>

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>

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>

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>

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

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();

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>

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.

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({

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.