fix(datepicker): placeholder not behaving correctly in legacy form field (#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.

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>

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;