Search code examples
angulartypescriptangular-materialangular7

Datepicker Angular Material Outline Form, Place Title in Top

I am trying to create an Angular Material Datepicker without Ideal Outline version like this. How would someone create this?

<mat-form-field appearance="outline">
    <input matInput [matDatepicker]="picker" placeholder="Effective Start Date">
    <mat-datepicker-toggle matSuffix [for]="picker">
        <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>
    </mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Ideal goal is this:

enter image description here

Currently with appearance = "outline" it is giving the view. Date is in the box rather than in outline title.

enter image description here

Please ignore the scale sizing issues, when pasting images.

Solution

  • enter image description here

    <mat-form-field appearance="outline">
<mat-label>Outline form field</mat-label>
<input matInput [matDatepicker]="picker" >
<mat-datepicker-toggle matSuffix [for]="picker">
    <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>

    Use mat label instead of placeholder.