How do I get the placeholder to display when Angular Material Datepicker is filled in?

1
votes

I am using the Angular Material Datepicker functionality. It is working fine other than the placeholder. In the docs, the placeholder becomes a small label when the input is filled in with a date. Mine is disappearing.

I have tried changing css to get it to work and even tried using a mat-label with no success. 

<input matInput [matDatepicker]="payBeginningDate" formControlName="payBeginningDate" id="payBeginningDate" placeholder="Beginning Date">
<mat-datepicker-toggle matSuffix [for]="payBeginningDate"></mat-datepicker-toggle>
<mat-datepicker #payBeginningDate></mat-datepicker>

I simply want the placeholder of "Beginning Date" to shrink over the date field like a label as it does in the docs.

2
angulardatepickerangular-material
Your label actually disappears totally? Even before making any changes to the CSS? – wentjun
Yes...once I start filing in the date, it disappears instead of animating above it like a "normal" mat-input field. – Clay Hess

2 Answers

1
votes

Try below code;

import below CSS file in your code;

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

    <mat-form-field>
<input matInput [matDatepicker]="payBeginningDate" formControlName="payBeginningDate" id="payBeginningDate" placeholder="Beginning Date">
<mat-datepicker-toggle matSuffix [for]="payBeginningDate"></mat-datepicker-toggle>
<mat-datepicker #payBeginningDate></mat-datepicker>
</mat-form-field>
0
votes

A mat-label above the input inside mat-form-field works for me, but it might be because I'm using outline appearance.

<mat-form-field appearance="outline">
  <mat-label>Beginning Date</mat-label>
  <input matInput [matDatepicker]="payBeginningDate" 
        formControlName="payBeginningDate" id="payBeginningDate" placeholder="Beginning Date">
  <mat-datepicker-toggle matSuffix [for]="payBeginningDate"></mat-datepicker-toggle>
  <mat-datepicker #payBeginningDate></mat-datepicker>
</mat-form-field>