docs(examples): all examples should use mat-form-field's fill appearance by default (#18252)

- stop using the soon to be deprecated legacy appearance by default
- fix issues where labels were specified in the `placeholder` attribute
  - instead of a `mat-label`

Relates to #14792

(cherry picked from commit 0e30214)

Author: Splaktar

src/components-examples/material/datepicker/datepicker-custom-icon/datepicker-custom-icon-example.html

@@ -1,5 +1,6 @@
 <mat-form-field class="example-full-width">
-  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
+  <mat-label>Choose a date</mat-label>
+  <input matInput [matDatepicker]="picker">
   <mat-datepicker-toggle matSuffix [for]="picker">
     <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>
   </mat-datepicker-toggle>

src/components-examples/material/datepicker/datepicker-date-class/datepicker-date-class-example.html

@@ -1,5 +1,6 @@
 <mat-form-field class="example-full-width">
-  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
+  <mat-label>Choose a date</mat-label>
+  <input matInput [matDatepicker]="picker">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker [dateClass]="dateClass" #picker></mat-datepicker>
 </mat-form-field>

src/components-examples/material/datepicker/datepicker-disabled/datepicker-disabled-example.html

@@ -1,22 +1,25 @@
 <p>
   <mat-form-field>
-    <input matInput [matDatepicker]="dp1" placeholder="Completely disabled" disabled>
+    <mat-label>Completely disabled</mat-label>
+    <input matInput [matDatepicker]="dp1" disabled>
     <mat-datepicker-toggle matSuffix [for]="dp1"></mat-datepicker-toggle>
     <mat-datepicker #dp1></mat-datepicker>
   </mat-form-field>
 </p>
 
 <p>
   <mat-form-field>
-    <input matInput [matDatepicker]="dp2" placeholder="Popup disabled">
+    <mat-label>Popup disabled</mat-label>
+    <input matInput [matDatepicker]="dp2">
     <mat-datepicker-toggle matSuffix [for]="dp2" disabled></mat-datepicker-toggle>
     <mat-datepicker #dp2></mat-datepicker>
   </mat-form-field>
 </p>
 
 <p>
   <mat-form-field>
-    <input matInput [matDatepicker]="dp3" placeholder="Input disabled" disabled>
+    <mat-label>Input disabled</mat-label>
+    <input matInput [matDatepicker]="dp3" disabled>
     <mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle>
     <mat-datepicker #dp3 disabled="false"></mat-datepicker>
   </mat-form-field>

src/components-examples/material/datepicker/datepicker-events/datepicker-events-example.html

@@ -1,5 +1,6 @@
 <mat-form-field>
-  <input matInput [matDatepicker]="picker" placeholder="Input & change events"
+  <mat-label>Input & change events</mat-label>
+  <input matInput [matDatepicker]="picker"
          (dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>

src/components-examples/material/datepicker/datepicker-filter/datepicker-filter-example.html

@@ -1,5 +1,6 @@
 <mat-form-field class="example-full-width">
-  <input matInput [matDatepickerFilter]="myFilter" [matDatepicker]="picker" placeholder="Choose a date">
+  <mat-label>Choose a date</mat-label>
+  <input matInput [matDatepickerFilter]="myFilter" [matDatepicker]="picker">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
 </mat-form-field>

src/components-examples/material/datepicker/datepicker-formats/datepicker-formats-example.html

@@ -1,5 +1,6 @@
 <mat-form-field>
-  <input matInput [matDatepicker]="dp" placeholder="Verbose datepicker" [formControl]="date">
+  <mat-label>Verbose datepicker</mat-label>
+  <input matInput [matDatepicker]="dp" [formControl]="date">
   <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
   <mat-datepicker #dp></mat-datepicker>
 </mat-form-field>

src/components-examples/material/datepicker/datepicker-locale/datepicker-locale-example.html

@@ -1,5 +1,6 @@
 <mat-form-field>
-  <input matInput [matDatepicker]="dp" placeholder="Different locale">
+  <mat-label>Different locale</mat-label>
+  <input matInput [matDatepicker]="dp">
   <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
   <mat-datepicker #dp></mat-datepicker>
 </mat-form-field>

src/components-examples/material/datepicker/datepicker-min-max/datepicker-min-max-example.html

@@ -1,5 +1,6 @@
 <mat-form-field class="example-full-width">
-  <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker" placeholder="Choose a date">
+  <mat-label>Choose a date</mat-label>
+  <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
 </mat-form-field>

src/components-examples/material/datepicker/datepicker-moment/datepicker-moment-example.html

@@ -1,5 +1,6 @@
 <mat-form-field>
-  <input matInput [matDatepicker]="dp" placeholder="Moment.js datepicker" [formControl]="date">
+  <mat-label>Moment.js datepicker</mat-label>
+  <input matInput [matDatepicker]="dp" [formControl]="date">
   <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
   <mat-datepicker #dp></mat-datepicker>
 </mat-form-field>

src/components-examples/material/datepicker/datepicker-overview/datepicker-overview-example.html

@@ -1,5 +1,6 @@
 <mat-form-field>
-  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
+  <mat-label>Choose a date</mat-label>
+  <input matInput [matDatepicker]="picker">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
 </mat-form-field>